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>