html 水平无序列表 - 由 prestashop 覆盖

Question

我尝试制作一个 html 表格或 ul 列表，以在其下方有一个带有文本（链接）的响应式图片库。我在从 prestashop 到源代码中的页面编辑的 CMS 页面中执行此操作。

我无法计算表格，因为 prestashop si 覆盖了规则并且无法确定是哪一个这样做的。

这是表一的链接： https://centrul-de-publicitate.ro/ro/content/12-cataloage 它似乎可以在台式机上运行，​​但在移动设备上却表现不佳。那里的表是错误的。

下一步是尝试使用 ul 和 li 作为列表。我从这里举了例子https://centrul-de-publicitate.ro/ro/68-tipar-digital-offsset 子类别列表在哪里，并且来自它们很好地展示的主题。

我测试的页面在这里： https://centrul-de-publicitate.ro/ro/content/13-portofoliu

我尝试将 1 个 div 与 class="subcategories" 一起使用，然后添加一个 div 与 class="row"。但是没有人继承 prestashop css 使我的列表像本地列表一样显示。 我的列表是垂直的。

另外，为那个画廊制作 ul 而不是一张桌子更好吗？ 我需要 2 页这类简单的画廊，我认为不超过 50 张图片。 它不是一个照片库。在目录中，它应该显示带有图片链接到 pdf 的目录和带有链接到价目表的文本。

使用代码：

<div class="row">
<div id="subcategories">
  <ul class="clearfix">
    <li>
      <div class="subcategory-image">
        <a href="https://centrul-de-publicitate.ro/ro/59-imbracaminte" title="IMBRACAMINTE" class="img">
          <img class="replace-2x" src="https://centrul-de-publicitate.ro/img/cms/Accesorii_imbracaminte_subcategorie.jpg" alt="CATALOG 1">
        </a>
      </div>
    <h5>
      <a class="subcategory-name" href="https://centrul-de-publicitate.ro/ro/69-print" title="PRINT">PRINT</a>
    </h5>
      <div class="cat_desc"><p>IMBRACAMINTE</p></div>
    </li>
    <li>
      <div class="subcategory-image">
        <a href="https://centrul-de-publicitate.ro/ro/59-imbracaminte" title="IMBRACAMINTE" class="img">
          <img class="replace-2x" src="https://centrul-de-publicitate.ro/img/cms/Imbracaminte_vara_subcategorie.jpg" alt="CATALOG 1">
        </a>
      </div>
    <h5>
      <a class="subcategory-name" href="https://centrul-de-publicitate.ro/ro/69-print" title="PRINT">PRINT</a>
    </h5>
      <div class="cat_desc"><p>IMBRACAMINTE</p></div>
    </li>
      <li>
      <div class="subcategory-image">
        <a href="https://centrul-de-publicitate.ro/ro/59-imbracaminte" title="IMBRACAMINTE" class="img">
          <img class="replace-2x" src="https://centrul-de-publicitate.ro/img/cms/Imbracaminte_sport_subcategorie.jpg" alt="CATALOG 1">
        </a>
      </div>
    <h5>
      <a class="subcategory-name" href="https://centrul-de-publicitate.ro/ro/69-print" title="PRINT">PRINT</a>
    </h5>
      <div class="cat_desc"><p>IMBRACAMINTE</p></div>
    </li>
      <li>
      <div class="subcategory-image">
        <a href="https://centrul-de-publicitate.ro/ro/59-imbracaminte" title="IMBRACAMINTE" class="img">
          <img class="replace-2x" src="https://centrul-de-publicitate.ro/img/cms/Imbracaminte_iarna_subcategorie.jpg" alt="CATALOG 1">
        </a>
      </div>
    <h5>
      <a class="subcategory-name" href="https://centrul-de-publicitate.ro/ro/69-print" title="PRINT">PRINT</a>
    </h5>
      <div class="cat_desc"><p>IMBRACAMINTE</p></div>
    </li>




  </ul>
</div>
</div>

我不知道怎么做这个简单的任务。

Answer 1

试试吧：

<style> ul { display: flex; } </style>

或更好：

<style> .clearfix { display: flex; } </style>