添加列表時的自動寬度

我有一個簡單的菜單（以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

添加列表時的自動寬度

回答

相關問題