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

发布时间：2020-12-14 19:44:00 所属栏目：资源来源：网络整理

导读：我需要创建一个具有不断变化的项目数量的水平导航菜单(这很重要 – 我不能将宽度粗加到CSS中,我不想用JS计算它们),填充到一定宽度,让我们说800px. 与表, table width="800" cellspacing="0" cellpadding="0" tr tdOne/td tdTwo/td tdThree/td tdFour/td tdFi

我需要创建一个具有不断变化的项目数量的水平导航菜单(这很重要 – 我不能将宽度粗加到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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!