Горизонтальное меню CSS - одинаковое расстояние? - PullRequest
Новая
       5

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

12 голосов
/ 30 июля 2009

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

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

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

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

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

Есть идеи?

РЕДАКТИРОВАТЬ: Спасибо за ответы. Однако, поскольку код, который генерирует элементы, не мой, я не могу установить встроенные стили при их создании без использования JavaScript позже.

Ответы [ 6 ]

15 голосов
/ 08 сентября 2009

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

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

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

display:inline-block;
zoom:1;
*display:inline;
14 голосов
/ 23 августа 2012

Если вы хотите, чтобы элемент занимал все доступное пространство, нет необходимости определять 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% требуется , чтобы избежать разрушения ячейки.

4 голосов
/ 30 июля 2009

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

1 голос
/ 01 июля 2015

Если вы открыты для использования 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>

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

1 голос
/ 30 июля 2009 
#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 элементов в поперечнике, с учетом границы и отступов. Но это будет зависеть от того, сколько у вас элементов, сколько отступов и т. Д.

0 голосов
/ 05 декабря 2011

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

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