HTML неупорядоченный список по горизонтали - переопределение prestashop - PullRequest
Новая
       35

HTML неупорядоченный список по горизонтали - переопределение prestashop

0 голосов
/ 16 марта 2019

Я пытаюсь создать html-таблицу или список ul, чтобы иметь адаптивную галерею изображений с текстом (ссылками) под ними. Я делаю это на странице CMS от prestashop до редактирования страницы в исходном коде.

Я не смог разобраться с таблицами, потому что prestashop si переписывает правила и не может понять, какой из них это делает.

Вот ссылка на первую таблицу: https://centrul -de-publicitate.ro / ро / содержание / 12-cataloage Кажется, что он работает на настольном компьютере, но не очень хорошо работает на мобильном телефоне. Таблица там не так.

Следующим шагом было попытаться использовать ul и li в качестве списка. Я взял пример отсюда https://centrul -de-publicitate.ro / ro / 68-tipar-digital-offsset где список подкатегорий и из темы они показывают хорошо.

Страница, которую я тестирую, находится здесь: https://centrul -de-publicitate.ro / ро / содержание / 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>

Я не могу понять, как выполнить эту простую задачу.

1 Ответ

0 голосов
/ 16 марта 2019

Попробуйте, может быть: 

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

или лучше: 

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