CSS動態水平導航菜單填滿特定寬度（表格行爲）

我需要創建一個水平導航菜單，其中包含不斷變化的項目數量（這很重要 - 我無法將寬度硬編碼到CSS中，我不能不想用JS計算它們），填充到一定的寬度，比方說800px。CSS動態水平導航菜單填滿特定寬度（表格行爲）

有桌子， enter image description here

<table width="800" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td>One</td> 
    <td>Two</td> 
    <td>Three</td> 
    <td>Four</td> 
    <td>Five Seven</td> 
    </tr> 
</table> 

<style> 
table td { 
     padding: 5px 0; 
     margin: 0; 
     background: #fdd; 
     border: 1px solid #f00; 
     text-align: center; 
    } 
</style>

需要注意的是更長的項目佔用更多的空間，我可以添加項目到HTML不改變CSS東西和菜單項收縮以容納更多的項目 - 整個菜單從未短於或長於800像素。

由於菜單不是一個表的語義上正確的用法，這可以用一個列表和純CSS來完成嗎？

來源

2011-02-22 Zdeněk Gromnica

我可以想到幾個「幾乎」，但不是100％的解決方案。也許用'display：table-cell'的東西 – Stephen 2011-02-22 18:22:31

在browsers that support the table display CSS規則是：

<style> 
    nav {display:table; width:800px; background:yellow} 
    ul {display:table-row; } 
    li {display:table-cell; border:1px solid red} 
</style> 

<nav> 
<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five Seven</li> 
</ul> 
</nav>

基本上，你必須建立一個令牌表。在行動：http://jsbin.com/urisa4

否則：不，如果你不能妥協你的要求。

來源

2011-02-22 18:32:18 DanMan

用CSS來做到這一點的唯一方法是硬編碼li元素width（假設你會使用以下結構）：

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
    <li>Five Seven</li> 
    </ul> 

ul { 
    width: 80%; /* or whatever */ 
} 

ul li { 
    width: 16%; 
    padding: 1%; 
}

JS Fiddle demo。

這可能會導致「未使用」的10％（用於margin或其他padding）。

在未來的某個時候css calculations可能能夠更流暢地執行此操作。

來源

2011-02-22 18:20:19

謝謝，但那不是我要找的。我不知道菜單項的數量（例如，網站的每個部分的項目數量都不相同），並且每個項目根據文本長度具有不同的寬度。 – 2011-02-22 18:32:15

這工作，但我不認爲你需要一些這樣想:)

<div class="master"> 
    <ul> 
     <li>test1</li> 
     <li>test2</li> 
     <li>aölsdkfaösdlfk</li> 
     <li>yeah baby</li> 
     <li>hi</li> 
    </ul> 
</div> 

.master { 
    width:800px; 
    background-color:black; 
    height:100px; 
    color:white; 
    display:table; 
} 
table { 
width:100%; 
} 

ul { 
display:table-row; 
width:100%; 
} 
li { 
display:table-cell; 
width:auto; 
margin:1px; 
border:1px solid white; 
background-color:red; 
text-align:center; 
    vertical-align:middle; 
}

http://jsfiddle.net/UnNyS/

來源

2011-02-22 18:25:38 Luke

這對Chrome和Firefox非常有用，但在IE中出現故障：（ – 2011-02-22 18:30:37

你可以看看ie規範中它們適用於哪些類的元素，這裏我只是複製表類...... – Luke 2011-02-22 18:33:40

IE7不支持顯示：所有表格，就像你之後指出的人一樣 – 2011-02-22 18:34:47

你可以做這樣的事情：

<style type="text/css"> 
#container { width: 800px ; border: 1px dashed #333; } 
#container div { width: inherit; display: table-cell; background: #ccc} 
</style> 

<div id="container"> 
    <div>Something</div> 
    <div>Something</div> 
    <div>Something</div> 
</div>

你想一下罷了，但能長到很多項目的方式。

希望這會有所幫助。

來源

2011-02-22 18:35:44 TNC

CSS動態水平導航菜單填滿特定寬度（表格行爲）

回答

相關問題