html – CSS动态水平导航菜单填写特定宽度(表行为)

概述我需要创建一个具有不断变化的项目数量的水平导航菜单(这很重要 – 我不能将宽度粗加到CSS中,我不想用JS计算它们),填充到一定宽度,让我们说800px. 与表, <table width="800" cellspacing="0" cellpadding="0"> <tr> <td>One</td> <td>Two</td> <td>Three</td> <t 我需要创建一个具有不断变化的项目数量的水平导航菜单(这很重要 – 我不能将宽度粗加到CSS中,我不想用Js计算它们),填充到一定宽度,让我们说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中的任何内容,并且菜单项缩小以适应其他项目 – 整个菜单永远不会缩短或超过800像素.

由于菜单不是语义上正确的使用表,可以用列表和纯CSS来完成吗？

解决方法 在 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

否则：不,如果你不能妥协你的要求.

总结

以上是内存溢出为你收集整理的html – CSS动态水平导航菜单填写特定宽度(表行为)全部内容，希望文章能够帮你解决html – CSS动态水平导航菜单填写特定宽度(表行为)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。