it-swarm.com.ru

Растянуть горизонтальный ul для соответствия ширине div

Для главной навигации моего сайта есть div шириной 980 пикселей с ul для ссылок главной навигации. Я пытаюсь сделать так, чтобы навигационные ссылки растягивались по ширине div равномерно.

<div style="width: 980px;">
<ul id="horizontal-style">
  <li><a href="#">Nav Item</a></li>
  <li><a href="#">Short Item</a></li>
  <li><a href="#">Really Long Nav Item</a></li>
  <li><a href="#">Nav Link</a></li>
  <li><a href="#">Another Link</a></li>
</ul>
</div>

Я делаю некоторые типичные CSS, чтобы сделать список ul по горизонтали (float: left, display: block). Я могу настроить отступ li, чтобы он был очень близок, но мне действительно нужен способ растянуть его, чтобы он соответствовал автоматически. Возможный?

Правка Сложность 1: Невозможно использовать таблицы. Сложность 2: каждый элемент навигации будет иметь различную ширину, чтобы вместить более длинные и короткие имена ссылок. 

41
Alan

Это самый простой способ сделать это: http://jsfiddle.net/thirtydot/jwJBd/

(или с table-layout: fixed для равномерного распределения по ширине: http://jsfiddle.net/thirtydot/jwJBd/59/ )

Это не будет работать в IE7.

#horizontal-style {
    display: table;
    width: 100%;
    /*table-layout: fixed;*/
}
#horizontal-style li {
    display: table-cell;
}
#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 5px;
    background: #999;
}

Старый ответ перед вашим редактированием: http://jsfiddle.net/thirtydot/DsqWr/

107
thirtydot

Люди ненавидят таблицы за нетабличными данными, но то, что вы запрашиваете, - это то, в чем таблицы хороши. <table width="100%">

5
Shad

не элегантный (но эффективный) способ: используйте проценты

#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

Это работает только с примером 5 <li>. Для более или менее, измените свой процент соответственно. Если у вас есть другие <li>s на вашей странице, вы всегда можете назначить этим конкретным классам "menu-li", чтобы затрагивать только их.

2
gailbear
#horizontal-style {
    width: 100%;
}

li {
    width: 20%;
}

Этот подход не будет адаптивным, поскольку на самом маленьком экране он будет составлять 20%, что было бы слишком маленьким, или другим способом переопределения был бы запрос медиа в различных точках останова. 

1
K. Kaur