Как распределять элементы списка HTML равномерно в неупорядоченном списке

Ответ 1

Еще один подход. Это то, что я использую при попытке равномерно распределить меню по всей странице. Хорошо, если у вас есть динамическое меню, которое будет меняться в зависимости от определенных условий (например, страница администратора, которая появляется только в том случае, если вы вошли в систему как администратор).

CSS

nav div ul {
display: table;
width: 100%;
list-style: none;
}
nav div ul li {
display: table-cell;
text-align: center;
}
nav div ul li a {
display: block;
}

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

EDIT: вы можете сделать так, чтобы он выглядел лучше, добавив это:

CSS

nav div ul li:first-child {
    text-align: left;
}
nav div ul li:last-child {
    text-align: right;
}

снова, непроверенный, просто набрал.

Ответ 2

Вам нужно будет установить ширину элементов li, чтобы заставить их заполнить пробел:

ul {
    width: 100%;
}
li {
    float: left;
    width: 33%;
}

(Скриншот демо)

Если вы добавите больше элементов в список, вам нужно будет отрегулировать процентную ширину - например, с четырьмя элементами, ширина будет 25%.

Ответ 3

У меня есть два ответа для вас.

Если вы хотите придерживаться модели float:

Элемент ul должен иметь свойство переполнения (без этого свойства ваш ul (или любой элемент, содержащий плавающие элементы) не получает высоту (это ожидаемое поведение, заметьте: http://www.quirksmode.org/css/clearing.html), поэтому по умолчанию будет установлена ​​высота 0 - эффект этого будет заключаться в том, что если вы установите разные цвета фона для ul/li и body, фон вашего ul не будет отображаться).

ul {
    text-align: center;
    width: 300px;
    overflow: auto;
}

Элементы li должны иметь ширину, иначе - в качестве плавающих элементов - их ширина будет установлена ​​на все, что они содержат. Я использовал пиксели ниже, но вы также можете использовать процентное значение.

li {
    float: left;
    margin: 5px 0 5px 0;
    width: 100px;
    text-align: center;
}

Используйте свойство display:inline-block для ваших элементов li (если поддержка старых браузеров не является приоритетом). IE 7 не поддерживает это, поэтому вам не очень полезно, если вам нужна широкая поддержка кросс-браузера, но он создает эффект, который вы хотите, но обязательно удалите любые пробелы между тегами </li> и <li>, иначе они будут рассчитываться в общей ширине и отображаться как пробелы между элементами.

Одно из преимуществ этого метода состоит в том, что вам не нужно знать или устанавливать ширину контейнера ul, если вы используете процентную ширину на ваших содержащихся элементах li, вы все равно получаете центрирование с помощью свойство text-align, которое у вас уже есть. Это делает ваш макет очень отзывчивым.

Здесь разметка и CSS, которые работают так, как я думаю, вы запрашиваете:

Разметка:

<ul>
<li>banana</li><li>orange</li><li>apple</li>
</ul>

CSS

li {
    display:inline-block;
    margin:5px 0 5px 0;
    width:33.33%;
}
ul {
    text-align: center;
}

• Если вы предпочитаете разметку на нескольких строках, вам придется рисовать левое и правое поля ваших элементов li в CSS.
• Если вы добавите элементы li, вам нужно будет изменить процентную ширину, чтобы она соответствовала (например, с четырьмя элементами li в вашей разметке, вам нужно будет изменить свой CSS на ширину 25 % для каждого).

Ответ 4

Я не понимаю ваш вопрос, поэтому я предположил, что вам может понадобиться следующее:

li {
    border:solid 1px red;
    clear:both;
    display:block;
    float: left;
    margin: 5px;
    width:100%;
}
ul {
    text-align: center;
    width:300px;
}

Ответ 5

Html:

 <ul>
    <li>1</li>
    <li>2 <br>4</li>
    <li>3</li>
</ul>

Css:

ul {
    list-style: none;
    font-size: 0;
    text-align: justify;
}

ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

li {
    font-size: 100px;
    display: inline-block;
}

codepen