問題描述

我需要創(chuàng)建一個水平導(dǎo)航菜單，其中包含不斷變化的項目數(shù)量(這很重要 - 我不能將寬度硬編碼到 CSS 中，我不想用 JS 計算它們)填充到一定的寬度，比如 800px.

I need to create a horizontal navigation menu with a changing number of items (this is important - I can't hard-code widths into the CSS and I don't want to calculate them with JS) that fill up to a certain width, let's say 800px.

對于表格，

<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>

請注意，較長的項目會占用更多空間，我可以在不更改 CSS 中的任何內(nèi)容的情況下將項目添加到 HTML 中，并且菜單項會縮小以容納額外的項目 - 整個菜單永遠不會短于或長于 800 像素.

Note that longer items take up more space and I can add items into the HTML without changing anything in CSS and the menu items shrink to accommodate additional items - the whole menu never being shorter or longer than 800px.

由于菜單在語義上不是對表格的正確使用，因此可以通過列表和純 CSS 來實現(xiàn)嗎?

As a menu isn't a semantically correct use of a table, can this be done with say a list and pure CSS?

推薦答案

在支持表格的瀏覽器中顯示 CSS規(guī)則，是的:

In browsers that support the table display CSS rules, yes:

<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>

基本上，您必須構(gòu)建一個令牌表.實際操作:http://jsbin.com/urisa4

Basically, you'd have to build a token table. In action: http://jsbin.com/urisa4

否則:不，如果你不能妥協(xié)你的要求.

Otherwise: no, not if you can't compromise your requirements.

這篇關(guān)于CSS動態(tài)水平導(dǎo)航菜單填充特定寬度(表格行為)的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！