Как я могу создать горизонтальное меню, где каждый элемент имеет одинаковую ширину и интервал между ними? - PullRequest
Новая
       35

Как я могу создать горизонтальное меню, где каждый элемент имеет одинаковую ширину и интервал между ними?

3 голосов
/ 31 июля 2011

Вот что у меня так далеко: скрипка

2 проблемы с этим, хотя:

  1. Я жестко запрограммировал ширину каждого li до 33%, что я предпочел бы не делать, чтобы я мог легко добавлять больше элементов.
  2. Я хочу поместить некоторый интервал между каждым элементом (разрыв в цвете фона), но как только я добавлю поле, один элемент будет смещен вниз по линии. Как мне обойти это? 

#main-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow:  auto;
}
#main-nav li {
    float: left;
    width: 33%;
    height: 25px;
    text-align: center;
}
#main-nav li a {
    width: 100%;
    display: block;
    height: 100%;
    line-height: 25px;
    text-decoration: none;
    background-color: #e0e0f0;
    font-weight: bold;
    color: #021020;
}
#main-nav li a:hover {
    background-color: #498cd5;
    color: #ddeeee;
}
<ul id="main-nav">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

Ответы [ 2 ]

6 голосов
/ 31 июля 2011

См .: http://jsfiddle.net/f6qmm/

display: table используется для равномерного пробела динамического числа li с.К сожалению, не работает в IE7, поэтому *float: left используется (только для IE7 и ниже), так что, по крайней мере, они все в одной строке - хотя это все еще выглядит ужасно.

padding-left: 5px применяется к каждому li, затем li:first-child { padding-left: 0 } удаляет его только для первого li. 

#main-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: table;
    table-layout: fixed;
    overflow: hidden
}
#main-nav li {
    display: table-cell;
    *float: left; /* improve IE7 */
    height: 25px;
    text-align: center;
    padding-left: 5px
}
#main-nav li:first-child {
    padding-left: 0
}
#main-nav li a {
    width: 100%;
    display: block;
    height: 100%;
    line-height: 25px;
    text-decoration: none;
    background-color: #e0e0f0;
    font-weight: bold;
    color: #021020;
}
#main-nav li a:hover {
    background-color: #498cd5;
    color: #ddeeee;
}
<ul id="main-nav">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

<hr />

<ul id="main-nav">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
    <li><a href="#">four</a></li>
    <li><a href="#">five</a></li>
</ul>
0 голосов
/ 31 июля 2011

Попробуйте эту скрипку: http://jsfiddle.net/Nk2Wy/1/.

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

Если вы добавите width: 50px к стилю a, все эти элементы будут иметь одинаковую ширину. Сейчас ширина зависит от фактического текста.

См. Вопрос (и ответы) Как избавиться от пробелов между горизонтальными элементами списка css? .

В связи с этим я снова обновил скрипку: http://jsfiddle.net/Nk2Wy/3/.

...