Горизонтальное меню CSS - на равном расстоянии друг от друга?

Question

У меня есть стандартное CSS-меню, сделанное с тегами UL и LI.Мне нужно, чтобы они занимали всю страницу по горизонтали (не мой реальный случай, но я воспользуюсь этим, чтобы упростить ситуацию).Однако элементы создаются динамически, и поэтому я не могу жестко закодировать ни элементы с to LI, ни поля.

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

Наконец, я видел довольно хорошее решение, которое устанавливает

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

Это создаст желаемое поведение в большинстве браузеров...за исключением IE.

Есть какие-нибудь идеи?

Редактировать:Спасибо за ответы.Однако, поскольку код, генерирующий элементы, не мой, я не могу устанавливать встроенные стили при их создании без последующего использования JavaScript.

Answer 1

Вы не можете установить высоту или ширину встроенного элемента. http://www.w3.org/TR/CSS2/visudet.html # рядный ширина

Попробуйте display:inline-block;

вот исправление для ie:

display:inline-block;
zoom:1;
*display:inline;

Answer 2

Если вы хотите, чтобы элемент занимал все доступное пространство, нет необходимости определять a priori ширину элементов меню (конечно, это поможет одинаково определить размеры элементов li ). Вы можете решить эту проблему, работая над свойством display.

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

Обратите внимание, что width:1% требуется , чтобы избежать разрушения ячейки.

Answer 3

Если ваши пункты меню генерируются динамически (поэтому вы не знаете, сколько их будет ранее), вы можете добавить атрибут style="width:xx" к li элементам (или в <style> вверху). .. или где угодно, на самом деле). Где xx следует либо width_of_parent_div_in_px/number_of_elements+'px', либо 100/number_of_elements+'%'. block s также должны быть элементами уровня float и left ed <=>.

Answer 4

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

Ширина: 18% может быть приблизительно правильной, если у вас есть 5 элементов в поперечнике, с учетом границы и отступов. Но это будет зависеть от того, сколько у вас элементов, сколько отступов и т. Д.

Answer 5

Если вы открыты для использования Flexbox, то сделать это несложно.Полная оценка кода, который я собираюсь опубликовать, принадлежит Приемы CSS поскольку это их CSS.

Ниже приведен пример, включающий префиксы поставщиков.

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }

<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Единственная проблема с Flexbox заключается в том, что вам нужно поддерживать IE 9 и ниже, в противном случае я не вижу причин не использовать Flexbox.Ты можешь посмотреть поддержку браузера для Flexbox можно здесь.

Answer 6

Вот что сработало для меня:

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}