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

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

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

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

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

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

Любые идеи?

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

Ответы

Ответ 1

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

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

здесь есть исправление, т.е.

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

Ответ 2

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

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

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

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

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

Ответ 3

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

Ответ 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 can fit on the same line.
}

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

Ответ 5

Если вы открыты для использования Flexbox, тогда это не сложно. Полный кредит на код, который я собираюсь опубликовать, относится к CSS Tricks, поскольку это их 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>

Ответ 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;
}