问题描述
我需要创建一个水平导航菜单,其中包含不断变化的项目数量(这很重要 - 我不能将宽度硬编码到 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 中的任何内容的情况下将项目添加到 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 来实现吗?
As a menu isn't a semantically correct use of a table, can this be done with say a list and pure CSS?
推荐答案
在支持表格的浏览器中显示 CSS规则,是的:
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>
基本上,您必须构建一个令牌表.实际操作:http://jsbin.com/urisa4
Basically, you'd have to build a token table. In action: http://jsbin.com/urisa4
否则:不,如果你不能妥协你的要求.
Otherwise: no, not if you can't compromise your requirements.