как мне обосновать горизонтальный список?

<p>у меня есть горизонтальная панель навигации, как показано ниже:</p><pre><code><ul id = "navigation"> <li><a href = "about.html">about</a></li> <li><a href = "contact.html">contact</a></li> <!-- ... --> </ul> </code></pre><p>я использую css, чтобы удалить точки маркера и сделать его горизонтальным.</p><pre><code>#navigation li { list-style-type: none; display: inline; } </code></pre><p>я пытаюсь обосновать текст, чтобы каждая ссылка была равномерно распределена, чтобы заполнить все пространство <code>ul</code>. я попытался добавить <code>text: justify</code> в оба селектора <code>li</code> и <code>ul</code>, но они все еще выровнены по левому краю.</p><pre><code>#navigation { text-align: justify; } #navigation li { list-style-type: none; display: inline; text-align: justify; } </code></pre><p>это странно, потому что, если я использую <code>text-align: right</code>, он будет вести себя как положено.</p><p>как мне равномерно распределить ссылки?</p>

<h3>современный подход - <a href="https://developer.mozilla.org/en-us/docs/web/guide/css/flexible\_boxes">css3 flexboxes</a> </h3><p>теперь, когда у нас есть <a href="https://developer.mozilla.org/en-us/docs/web/guide/css/flexible\_boxes">css3 flexboxes</a> , вам больше не нужно прибегать к хитростям и обходным путям, чтобы сделать эту работу. к счастью, <a href="http://caniuse.com/#feat=flexbox">поддержка браузера прошла долгий путь</a> , и большинство из нас может начать использовать flexbox.</p><p>просто установите для <code>display</code> родительского элемента значение <code>flex</code>, а затем измените свойство <a href="https://developer.mozilla.org/en-us/docs/web/css/justify-content"><code>justify-content</code></a> на <a href="http://jsfiddle.net/sdaq97hh/"><code>space-between</code></a> или <a href="http://jsfiddle.net/y96j80cy/"><code>space-around</code></a> , чтобы добавить пространство между/вокруг дочерних элементов flexbox. затем добавьте дополнительные префиксы поставщиков для <a href="http://caniuse.com/#feat=flexbox">больше поддержки браузера</a> .</p><p><strong>использование <code>justify-content: space-between</code></strong> - <a href="http://jsfiddle.net/sdaq97hh/">(<strong>пример здесь)</strong></a> :</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>ul { list-style: none; padding: 0; margin: 0; } .menu { display: flex; justify-content: space-between; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><ul class="menu"> <li>about</li> <li>contact</li> <li>contact longer link</li> <li>contact</li> </ul></code></pre> </div> </div> </p><hr><p><strong>использование <code>justify-content: space-around</code></strong> - <a href="http://jsfiddle.net/y96j80cy/"><strong>(пример здесь)</strong></a> :</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>ul { list-style: none; padding: 0; margin: 0; } .menu { display: flex; justify-content: space-around; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><ul class="menu"> <li>about</li> <li>contact</li> <li>contact longer link</li> <li>contact</li> </ul></code></pre> </div> </div> </p>

<p>вам нужно использовать «трюк», чтобы сделать эту работу.</p><p><strong>см .:</strong> <a href="http://jsfiddle.net/2krjv/">http://jsfiddle.net/2krjv/</a> </p><p><strong>html:</strong></p><pre><code><ul id="navigation"> <li><a href="about.html">about</a></li> <li><a href="contact.html">contact</a></li> <!-- ... --> <li class="stretch"></li> </ul> </code></pre><p><strong>css:</strong></p><pre><code>#navigation { list-style-type: none; text-align: justify; height: 21px; background: #ccc } #navigation li { display: inline } #navigation .stretch { display: inline-block; width: 100%; /* if you need ie6/7 support */ *display: inline; zoom: 1 } </code></pre><p>подробная информация о хитрости ie6/7: <a href="https://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6/5838575#5838575">встроенный блок не работает в internet explorer 7, 6</a> </p>

<p>это также может быть достигнуто с помощью псевдоэлемента в элементе <code>ul</code>:</p><pre><code>ul { margin: 0; padding: 0; list-style-type: none; text-align: justify; } ul:after { content: ""; width: 100%; display: inline-block; } li { display: inline; } </code></pre>

<p>просто делать:</p><pre><code>ul { width:100%; } ul li { display:table-cell; width:1%; } </code></pre>

<p>это может удовлетворить ваши потребности:</p><pre><code>#navigation{ } #navigation li{ list-style-type: none; text-align: center; float: left; width: 50%; /*if 2 <li> elements, 25% if 4...*/ } </code></pre><p><strong>demo</strong>: <a href="http://jsfiddle.net/kmqzq/">http://jsfiddle.net/kmqzq/</a> </p>

<p>html</p><pre><code><ul id="navigation"> <li><a href="#">the missing link</a></li> <li><a href="#">about</a></li> <li><a href="#">riluri</a></li> <li><a href="#">contact us</a></li> <!-- ... --> <li class="stretch"></li> </ul> </code></pre><p>css</p><pre><code>#navigation { list-style-type: none; text-align: justify; height: 21px; background: #ccc } #navigation li{ display: inline } #navigation li a { text-align: left; display:inline-block; } #navigation .stretch { display: inline-block; width: 100%; /* if you need ie6/7 support */ *display: inline; zoom: 1 } </code></pre><p>посмотреть демо: <a href="http://jsfiddle.net/2krjv/392/">http://jsfiddle.net/2krjv/392/</a> </p>

<p>вам нужно разделить элементы <li>, иначе выравнивание не сработает.</p><pre><code>for example, this: <ul><li>test</li><li>test</li></ul> needs to be like this: <ul> <li>test</li> <li>test</li> </ul> </code></pre><p>или хотя бы иметь пробелы между открывающим и закрывающим тегами <li>.</p>

<p>отмеченный ответ не работает, если в нем есть пробел.</p><p>верхний ответ здесь работает с пробелами <a href="https://stackoverflow.com/questions/49536/how-do-i-really-justify-a-horizontal-menu-in-htmlcss">как я * действительно * оправдываю горизонтальное меню в html + css?</a> </p>

<p> <a href="http://code.jelmerdemaat.nl/2012/perfectly-justified-css-grid-technique-using-inline-block/">этот блог</a> имеет достаточно надежное решение. требуются некоторые небольшие изменения, чтобы приспособить навигацию <code>ul/li</code>, хотя:</p><pre><code>#navigation { width: 100%; padding: 0; text-align: justify; font-size: 0; font-size: 12px\9; /* ie 6-9 */ } #navigation>li { font-size: 12px; text-align: center; display: inline-block; zoom: 1; *display: inline; /* ie only */ } #navigation:after { content:""; width: 100%; display: inline-block; zoom: 1; *display: inline; } </code></pre><p> <a href="http://jsfiddle.net/mblase75/9vnbs/">http://jsfiddle.net/mblase75/9vnbs/</a> </p>