Question

我尝试制作一个html表格或ul列表，以使图片的响应式图库下面带有文本（链接）。我在prestashop的CMS页面中通过源代码中的页面编辑来做到这一点。

我无法弄清楚表，因为prestashop si会覆盖规则，也无法弄清楚是哪个规则。

这是表1的链接： 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

我尝试对class =“ subcategories”使用1个div，然后对class =“ row”添加了一个div。但是没有人继承了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>

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

1 个答案: