Авто ширина при добавлении списка

У меня есть простое меню (с margin:0 auto) с некоторыми элементами списка. Теперь я пытаюсь сохранить меню в том же центральном положении, когда добавляю дополнительные элементы списка. Вот скрипка play with itАвто ширина при добавлении списка

ul{ 
    list-style-type: none; 
    background: red; 
    margin:0 auto; 
    width: 56%; 
    max-width:600px 

} 

ul li{ 

display: inline-block; 
width: 100px; 
background-color: #000; 
color: #fff; 

}

Я хочу еще li-х к ul, чтобы обернуть его и до сих пор по центру.

Я не хочу использовать Flexbox, потому что IE не поддерживает: D

The problem is solved. Giving the ul {display:table} Thank you all,especially Coop !

источник

2013-07-31 Code

Я не уверен, чтобы понять ваш вопрос. Когда вы говорите «когда я добавляю дополнительный список», это элемент 'li' или' ul'? Каков результат, когда вы добавляете его? – Brewal

В вашем примере вы хотите, чтобы элементы 'li' (100px в ширину) были равномерно распределены в блоке' ul', или вы хотите, чтобы блок 'ul' сокращался, чтобы соответствовать элементам' li'? –

Одна из возможных проблем заключается в том, что при добавлении четвертого элемента список переносится во вторую строку ... –

Не уверен, что это именно то, что вы после этого, но я часто имел проблемы центровки нав меню и пришел к такому решению:

ul{ 
    display: table; 
    margin: 0 auto; 
    list-style-type: none; 
    background: red; } 

ul li { 
    float: left; 
    color: #fff; 
    background-color: #000; }

Обратите внимание, что лифты плавают, поэтому вам также необходимо очистить их от ul. Я бы предложил решение clearfix для этого. Например, полный код может быть:

ul { 
    display: table; 
    margin: 0 auto; 
    list-style-type: none; 
    background: red; } 

ul li { 
    float: left; 
    color: #fff; 
    background-color: #000; } 

.clear:before, .clear:after { content: " "; display: table; line-height: 0; } 
.clear:after { clear: both; } 
.clear { *zoom: 1; }

...

<ul class="clear"> 
    <li>First item here</li> 
    <li>Second item here</li> 
    <li>Third item here</li> 
</ul>

источник

2013-07-31 15:51:52 Coop

Спасибо, сэр, это именно то, ищу: D – Code

Авто ширина при добавлении списка

ответ

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