CSS：如何製作水平（UL）列表，使每個項目保持統一的寬度？

Question

也就是說，沒有爲每個單獨項目定義特定的「寬度」數量。如在其中，最寬的元素（通過其內容）設置每個其他元素的寬度。

此外，如何跨越其容器跨所述列表100％，還保持每個項目相同的寬度？

Answer 1

如果我理解正確：

1. 你想要的清單。
2. 您希望每個列表項目具有相同的寬度。

3. 你想要的寬度是最寬的列表項內容的寬度

4. 您也想辦法在整個容器均勻地間隔開列表項， 這似乎與3不相容的，因爲那樣的話他們不會按內容均勻分佈，但按容器大小分佈。

所以我假設你想要兩種不同的解決方案。

我認爲你可以做一些瀏覽器

<style> 
    ul, li{float:left;margin;padding:0;display:block;} 
    li {clear:left;width:100%;margin:1px 0;background:#03a;} 
</style> 
<ul> 
    <li>Item 1</li> 
    <li>Item 2 which is longer</li> 
    <li>Item 3</li> 
</ul> 

作品。我似乎記得它不能在IE中工作，並且必須使用css表達式來工作。

這個想法是ul和li被浮動以縮小它們的內容寬度。 li被清除並設置爲其容器寬度的100％，這是容器縮小到其大小的相同容器。

-

你的其他選擇是在CSS不可能的，除非你知道列表項的數目。 雖然如果您不知道列表項的數量，這意味着服務器端或客戶端都有腳本，您可以找出項目的數量。 :)

我已經解決了這個問題，給了ul一個類，其中的孩子的數量，並使用大量的CSS規則，希望一個堅持。

如

<style> 
    ul.lis1 li {width:100%} 
    ul.lis2 li {width:50%} 
    ul.lis3 li {width:33.3%} 
    ul.lis4 li {width:25%} 
    /* ... you can keep going forever here, though there'll be a point at which they become too thin and your UI breaks anyway, */ 
</style> 
<ul class="lis4"> <!-- lis4 is generated by PHP or Ruby or whatever --> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    <li>item 4</li> 
</ul> 

Answer 2

你需要把它們飄浮此：

ul { 
    list-style: none; 
} 

ul li { 
    float: left; 
    width: 100px; /* Or whatever arbitrary amount you want */ 
} 

列表會自動跨越容器的寬度 - 它是一個塊元素。

Answer 3

使用CSS表與固定表格佈局。

無論列表中有多少項目，結果將是每個<li>共享<ul>的相等部分。

ul 
{ 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    border: 1px solid #c2c2c2; 
    box-sizing: border-box; 
} 

li 
{ 
    text-align: center; 
    display: table-cell; 
    border-right: 1px solid #c2c2c2; 
} 

Example FIDDLE