HTML: центрирование несортированного списка с неизвестным количеством элементов по горизонтали

Я работаю на странице, где я хочу перечислить неизвестное количество элементов, используя html-тег ul/li. Что я хочу это следующее:

  • Список должен использовать как можно больше по горизонтали
  • Список следует центрировать по горизонтали, даже если необходимы разрывы линий (нет места справа от наиболее правильно расположенных li-записей)
  • Ширина li-деталей фикчирована
  • Li-элементы выровнены по левому краю

Но я столкнулся с некоторыми проблемами:

  • Разрыв строки зависит от размера браузера, поэтому я не могу сказать, что буду вставлять новую строку каждый элемент nth-li
  • Если требуется разрыв линии, ширина ul-элемента (или div-элемента, окружающего его, увеличивается, поэтому он не центрирован по горизонтали)

У меня есть следующий код, который иллюстрирует мою проблему: https://jsfiddle.net/07yfv9gr/3/

<div style="border: 1px solid black; display: inline-block; width: 500px; text-align: center;">
    <ul style="list-style: none outside none; margin: 0px; padding: 0px; display: inline-block; border: 1px solid green; text-align: left;">
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 1</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 2</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 3</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 4</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 5</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 6</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 7</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 8</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 9</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 10</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 11</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 12</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 13</li>
    </ul>
</div>

Примечание: ширина зафиксирована к 500px для pruposes иллюстрации только на jsfiddle. Он должен быть 90% или похож.

В приведенном выше примере разрывы линий вставляются автоматически после элементов 3, 6, 9 и 12. Но это автоматически увеличивает размер окружающего div, поэтому у меня есть пустое пространство рядом с элементом 3, 6, 9 и 12. Следовательно, невозможно центрировать div по горизонтали 🙁

Что я хочу, это что-то вроде этого: https://jsfiddle.net/7L1su8zp/5/

<div style="border: 1px solid black; display: inline-block; width: 500px; text-align: center;">
    <ul style="list-style: none outside none; margin: 0px; padding: 0px; display: inline-block; border: 1px solid green; text-align: left;">
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 1</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 2</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 3</li>
        <br />
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 4</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 5</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 6</li>
        <br />
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 7</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 8</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 9</li>
        <br />
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 10</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 11</li>
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 12</li>
        <br />
        <li style="width: 135px; display: inline-block; border: 1px solid red;">Element 13</li>
    </ul>
</div>

Но, как я уже упоминал, я не могу вставлять разрывы строк после каждого n-го элемента, потому что я хочу показать как можно больше li-элементов на линию, в зависимости от ширины браузера.

Я надеюсь, что кто-нибудь знает хорошее решение для меня проблемы 🙂

1 ответ

  1. «Ширина li-деталей фиксирована»

    Затем просто используйте css media queries для обнаружения с браузера и посмотреть, сколько элементов списка будет соответствовать.

    Есть статистика использования разрешения экрана в Интернете. Таким образом, вы видите наиболее часто используемые ширины и сделать ваш сайт выглядит хорошо на тех, как:
    1366, 1920, 1280, 1440, 1600, 1024, 1680, 1360