CSS动态水平导航菜单填充特定宽度（表行为） [英] CSS dynamic horizontal navigation menu to fill up specific width (table behavior)

问题描述

我需要创建一个水平导航菜单，其中包含了更多的项目（这很重要 - 我不能硬编码宽度到CSS，我不想用JS计算），填充到

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>

请注意，较长的项占用更多空间，我可以在HTML中添加项而不更改CSS中的任何内容并且菜单项缩小以容纳附加项 - 整个菜单从不短于或大于800px。

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来完成？

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

推荐答案

在支持表格显示的浏览器 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

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

否则：no ，如果你不能妥协你的要求。

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

这篇关于CSS动态水平导航菜单填充特定宽度（表行为）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！