我需要創建一個水平導航菜單,其中包含不斷變化的項目數量(這很重要 - 我無法將寬度硬編碼到CSS中,我不能不想用JS計算它們),填充到一定的寬度,比方說800px。CSS動態水平導航菜單填滿特定寬度(表格行爲)
有桌子,
<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來完成嗎?
我可以想到幾個「幾乎」,但不是100%的解決方案。也許用'display:table-cell'的東西 – Stephen 2011-02-22 18:22:31