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

<p>я хочу, чтобы мои элементы <code>li</code>, которые образуют горизонтальное меню, были равномерно распределены по ширине моего элемента <code>ul</code>. я обычно <code>float</code> мои <code>li</code> элементы слева и добавить некоторые поля. но как мне установить правильные интервалы, чтобы они проходили слева от моего элемента <code>ul</code> до правого края?</p><p>вот <a href="http://jsfiddle.net/uqcqc/">пример jsfiddle меню, не распределенного</a> через <code>ul</code>.</p><p>интервал должен быть одинаковым между каждым <code>li</code>. но элементы <code>li</code> могут быть разной длины.</p>

<p>еще один подход. это то, что я использую при попытке равномерно распределить меню по странице. хорошо, если у вас есть динамическое меню, которое будет меняться в зависимости от определенных условий (например, страница администратора, которая отображается только в том случае, если вы вошли в систему как администратор).</p><p>css:</p><pre><code>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; } </code></pre><p>я был немного ленив и просто скопировал это из моего текущего проекта, так что вам придется адаптировать его под свой код, но это мой предпочтительный метод создания горизонтального меню.</p><p>правка: вы можете сделать так, чтобы он выглядел лучше, добавив это:</p><p>css:</p><pre><code>nav div ul li:first-child { text-align: left; } nav div ul li:last-child { text-align: right; } </code></pre><p>опять не проверено, просто напечатано.</p>

<p>у меня есть два ответа для вас.</p><p><strong>если вы хотите придерживаться модели <code>float</code></strong>:</p><p>для вашего элемента <code>ul</code> должно быть установлено свойство overflow (без этого свойства вашему <code>ul</code> (или любому элементу, содержащему плавающие элементы) не присваивается высота (это ожидаемое поведение, обратите внимание: <a href="http://www.quirksmode.org/css/clearing.html">http://www.quirksmode.org /css/clearing.html</a> ) и поэтому по умолчанию будет иметь высоту 0 - эффект этого будет в том, что если вы установите разные цвета фона для вашей <code>ul</code><strong><code>li</code> и body, фон вашего <code>ul</code> не будет отображаться ).</p><pre><code>ul { text-align: center; width: 300px; overflow: auto; } </code></pre><p>ваши элементы <code>li</code> должны иметь ширину, в противном случае - как плавающие элементы - их ширина будет установлена на то, что они содержат. я использовал пиксели ниже, но вы также можете использовать процентное значение.</p><pre><code>li { float: left; margin: 5px 0 5px 0; width: 100px; text-align: center; } </code></pre><p>\_/используйте свойство <code>display:inline-block</code> для ваших элементов li</strong> (если поддержка старых браузеров не является приоритетом). ie 7 не поддерживает это, поэтому бесполезно, если вам нужна широкая межбраузерная поддержка, но создает нужный эффект - хотя убедитесь, что вы затем удалите все пробелы между тегами <code></li></code> и <code><li></code>, иначе они будут будет учитываться в общей ширине и будет отображаться как пробелы между элементами.</p><p>одним из преимуществ этого метода является то, что вам не нужно знать или устанавливать ширину контейнера <code>ul</code>, если вы используете процентную ширину для содержащихся в нем элементов <code>li</code>, вы все равно получаете центрирование бесплатно с уже имеющимся у вас свойством text-align , это делает ваш макет очень отзывчивым.</p><p>вот разметка и css, которые работают так, как я думаю, вы запрашиваете:</p><p>разметка:</p><pre><code><ul> <li>banana</li><li>orange</li><li>apple</li> </ul> </code></pre><p>css:</p><pre><code>li { display:inline-block; margin:5px 0 5px 0; width:33.33%; } ul { text-align: center; } </code></pre><ul> <li>если вы предпочитаете хранить разметку в несколько строк, вам придется возиться с левым и правым полями ваших элементов <code>li</code> в css.</li> <li>если вы добавите элементы <code>li</code>, вам придется изменить ширину в процентах, чтобы она соответствовала (например, с четырьмя элементами <code>li</code> в вашей разметке вам нужно изменить css, чтобы ширина каждого элемента составляла 25%).</li> </ul>

<p>вам нужно установить ширину элементов li, чтобы они заполняли пространство:</p><pre><code>ul { width: 100%; } li { float: left; width: 33%; } </code></pre><p>( <a href="http://jsfiddle.net/uqcqc/2/">fiddle демо</a> )</p><p>если вы добавите больше элементов в список, вам нужно будет отрегулировать ширину в процентах - например, для четырех элементов ширина будет составлять 25%.</p>

<p>я не понимаю ваш вопрос ясно, поэтому я предположил, что вы можете захотеть это:</p><pre><code>li { border:solid 1px red; clear:both; display:block; float: left; margin: 5px; width:100%; } ul { text-align: center; width:300px; } </code></pre>