顯示一個水平列表作爲一個塊

我有一個水平無序列表我想水平居中在一個div容器（這是任意大於列表）。我正在考慮將ul顯示爲一個塊，並使用自動邊距將列表居中放在其父容器中。但是......我似乎無法讓ul顯示爲一個塊，並且不會佔用100％的寬度。顯示一個水平列表作爲一個塊

據我所知，塊元素採用所需的寬度來環繞子元素（除非它們是未清空的浮點或絕對定位），所以我認爲將ul和li作爲塊放置應該能夠做到。不幸的是，它不，我不明白爲什麼。

有什麼想法？

下面的代碼： http://jsfiddle.net/kccbg/1/

來源

2012-06-19 Prusprus

嘗試使用display: inline-block代替，並且像這樣的容器放置text-align: center：

HTML：

<div class="container"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 1</li> 
     <li>Item 1</li> 
     <li>Item 1</li> 
     <li>Item 1</li> 
    </ul> 
</div>

CSS：

.container{ 
    width:100%; 
    background-color:#CCC; 
    height:20px; 
    text-align: center; 
} 
ul{ 
    display:inline-block; 
    margin:0 auto; 
} 
li{ 
    display:inline-block; 
}

Example

來源

2012-06-19 19:39:02 Zhihao

您可以通過刪除應用於li的不必要的浮動和clearfix來進一步改善此問題 – gmeben

+1這是我的問題從前幾次，很好的解決方案... –

@gmeben，你是對的，謝謝。我只是建立在OP最初的東西之上。我用你的建議編輯了我的答案。 – Zhihao

如果你知道你的列表項的總寬度，可以設置<ul>的寬度，然後將其邊距設置爲0汽車。 jsFiddle example。

CSS

.container{ 
    width:100%; 
    background-color:#CCC; 
    height:20px; 
} 
ul{ 
    list-style:none; 
    width:200px; 
    margin:0 auto; 
} 
li{ 
    float:left; 
}

來源

2012-06-19 19:40:06 j08691

UPDATE：（基於gmeben評論）

更改CSS來：

.container{width:100%; background-color:#CCC; text-align:center} 
li{display:inline;}

，並刪除

<li class="clear"></li>

from html。

沒有浮動和清除，沒有內聯塊（所有瀏覽器都不支持/呈現正確）。

來源

2012-06-19 19:41:51

ul不需要聲明爲塊級元素，'.container'不需要與其關聯的高度屬性。 – gmeben

@gmeben。非常好，謝謝！ – 2012-06-19 19:52:40

顯示一個水平列表作爲一個塊

回答

相關問題