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

Question

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

我无法理解表格，因为 prestashop 会覆盖规则并且无法判断是哪一个这样做。

这是表一的链接: 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 个带有 class="subcategories"的 div，然后添加一个带有 class="row"的 div。但是没有人继承 prestashop css 来使我的列表像本地列表一样显示。我的列表固定为垂直。

此外，为该画廊制作 ul 而不是 table 是否更好？我需要 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>