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

Question

У меня есть горизонтальная панель навигации, как показано ниже:

<ul id = "Navigation">
    <li><a href = "About.html">About</a></li>
    <li><a href = "Contact.html">Contact</a></li>
    <!-- ... -->
</ul>

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

#Navigation li
{
    list-style-type: none;
    display: inline;
}

Я пытаюсь обосновать текст, чтобы каждая ссылка была распределена равномерно, чтобы заполнить все ulПространство Я пытался добавить text: justify как li а также ul селекторы, но они все еще выровнены по левому краю.

#Navigation
{
    text-align: justify;
}

#Navigation li
{
    list-style-type: none;
    display: inline;
    text-align: justify;
}

Это странно, потому что если я использую text-align: right, он ведет себя как ожидалось.

Как мне равномерно распределить ссылки?

Answer 1

Современный подход - CSS3 Flexboxes

Теперь, когда у нас есть флексбоксы CSS3, вам больше не нужно прибегать к хитростям и обходным путям, чтобы сделать эту работу. К счастью, поддержка браузера прошла долгий путь, и большинство из нас может начать использовать flexbox.

Просто установите родительский элемент display в flex а затем изменить justify-content свойство либо space-between или же space-around чтобы добавить пространство между / вокруг дочерних элементов flexbox. Затем добавьте дополнительные префиксы поставщиков для большей поддержки браузера.

С помощью justify-content: space-between - (пример здесь):

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-between;
}

<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>

---

С помощью justify-content: space-around - (пример здесь):

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-around;
}

<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>

Answer 2

Вы должны использовать "трюк", чтобы сделать эту работу.

Смотрите: http://jsfiddle.net/2kRJv/

HTML:

<ul id="Navigation">
    <li><a href="About.html">About</a></li>
    <li><a href="Contact.html">Contact</a></li>
    <!-- ... -->
    <li class="stretch"></li>
</ul>

CSS:

#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
}

Подробности об IE6/7 хитрости: встроенный блок не работает в Internet Explorer 7, 6

Answer 3

Это также может быть достигнуто с помощью псевдоэлемента на ul элемент:

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;
}

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

li {
    display: inline;
}

Answer 4

Просто делать:

ul { width:100%; }
ul li {
  display:table-cell;
  width:1%;
}

Answer 5

Это может удовлетворить ваши потребности:

#Navigation{
}
#Navigation li{
    list-style-type: none;
    text-align: center;
    float: left;
    width: 50%; /*if 2 <li> elements, 25% if 4...*/
}

демо: http://jsfiddle.net/KmqzQ/

Answer 6

HTML

<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>

CSS

#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
}

Посмотреть демо: http://jsfiddle.net/2kRJv/392/

Answer 7

Вам нужно разделить элементы

, иначе выравнивание не сработает.

For example, this:

<ul><li>test</li><li>test</li></ul>


needs to be like this:
<ul>
<li>test</li>
<li>test</li>
</ul>

или хотя бы иметь пробелы между открывающим и закрывающим тегами

.

Answer 8

Этот блог имеет достаточно надежное решение. Требуются некоторые небольшие изменения, чтобы приспособить ul/li навигация, хотя:

#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;
}

http://jsfiddle.net/mblase75/9vNBs/

Answer 9

Отмеченный ответ не работает, если в нем есть пробел.

Верхний ответ здесь работает с пробелами. Как я действительно * оправдываю горизонтальное меню в HTML+CSS?

Answer 10

Использование CSS Flexbox

      #Navigation {
  width: 100%;
  padding: 0;
  margin: .5rem 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  list-style-type: none;
  color: #ffffff;
}