Как расширить Lis до полной ширины DIV

это мой HTML-код:Как расширить Lis до полной ширины DIV

<div id="menu"> 
<ul> 
    <li>Home</li> 
    <li>My blah</li> 
    <li>Lorem ipsum</li> 
    <li>Dolor amet</li> 
    <li>photogallery</li> 
</ul> 
</div>

и это мой CSS:

#menu li { 
display: inline; 
list-style-type: none; 
}

#menu в #header-wrap, который 800px в ширину. Я хочу расширить текст внутри UL до того же размера, что и #menu, который составляет 800 пикселей. Я не могу сделать это с margin-left и margin-right, потому что он оставляет пустые места или он перемещает li на другую строку, которую я не хочу.

Так есть ли какой-либо элемент, который я могу добавить в CSS, и он расширит текст до 800 пикселей?

enter image description here

Я не могу использовать word-spacing, потому что некоторые вещи в li с более чем одно слово.

источник

2013-04-30 Kyrbi

Почему не использовать простое увеличение ширины вашего div, потому что я думаю, что div с id '#menu' ограничивается получением расширения до размера его родителя. – dreamweiver

Является ли определенное число LI предопределенным? –

Я не знаю, что вы подразумеваете под предопределенным, но у нас будет 7 LI, которые не изменятся. – Kyrbi

Вы указали display недвижимость inline. Встроенные элементы будут уменьшаться до ширины их содержимого.

Если вы хотите, чтобы эта ширина менялась display либо block, либо inline-block.

#menu li { 
display: inline-block; /*compensate for spaces in the source if using this*/ 
width: 20%; /* for 5 li's (100%/5)*/ 
margin: 0; 
padding: 0; 
text-align: center; /* optional */ 
list-style-type: none; 
} 



#menu li { 
display: block; 
float: left; 
width: 20%; /* for 5 li's (100%/5)*/ 
margin: 0; 
padding: 0; 
text-align: center; /* optional */ 
list-style-type: none; 
}

EDIT: для 7 LI изменение ширины составляет 14,25%. Это даст вам немного места на правой стороне, которая может быть скорректирована путем выравнивания по центру контейнера списка.

EDIT: Как FAngel отметил, inline-block элементы имеют раздражающую привычку позволяя форматирования пространства проступают, так что block + float подход является более желательным.

источник

2013-04-30 13:17:56

Одно примечание: встроенный блок там не работает. Пробелы (или окончания строк) после li будут добавлять дополнительное пространство после каждого li и перемещать 5-й элемент на новую строку (например, здесь http://jsfiddle.net/htkhH/). Возможное исправление для этой ситуации: удалить теги закрытия LI, как здесь http://jsfiddle.net/htkhH/1/ –

@FAngel Правильно! Ссылка на статью для справки: http: // css-трюки.com/combat-the-space-between-inline-block-elements/ –

Я использовал ваш код, но он не работает должным образом. :/http://jsfiddle.net/Zvp8e/1/embedded/result/ – Kyrbi

Этот SO пост должен быть полезным для того, что вам нужно

CSS - horizonal navigation list items to fill all available spce

Ваш CSS может выглядеть так:

#menu ul { 
     list-style: none; 
     margin:0; 
     padding:0; 
     display: table; 
     width: 100%; 
    } 
    #menu li { 
     text-align: center; 
     display: table-cell; 
    }

источник

2013-04-30 13:19:13

Просто для удовольствия, еще один способ сделать это без display: table является развернуть окончательный <li> и передать его overflow: hidden;:

<!DOCTYPE html> 
<html lang="pl"> 
<head> 
    <meta charset="utf-8" /> 
    <style> 
     .wrapper {width: 800px; margin: 0 auto;} 

     ul {list-style: none; margin:0; padding:0;} 

     ul li {float: left;} 

     ul li.last {float: none; overflow: hidden;} 

     li a { 
      color: #222; 
      text-decoration: none; 
      display: block; 
      line-height: 1.5em; 
      background: #e7e7e7; 
      padding: 0 62px; 
     } 

     li.last a {padding: 0; text-align: center;} 

     li a:hover, li a:focus {background: #222; color: #fff;} 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <ul> 
      <li><a href="#">Lorem</a></li> 
      <li><a href="#">ipsum</a></li> 
      <li><a href="#">dolor</a></li> 
      <li><a href="#">sit</a></li> 
      <li class="last"><a href="#">amet</a></li> 
     </ul> 
    </div> 
</body> 
</html>

Конечно, вместо class="last" может использоваться li:last-child, но класс делает его немного более обратным. Однако он полагается на дизайн с фиксированной шириной, хотя в наши дни это немного устарело.

источник

2013-04-30 14:00:23

Как расширить Lis до полной ширины DIV

ответ

Смежные вопросы