具有均匀宽度导航项目的流体布局

Question

我正在为移动设备构建一个网站，因此具有流畅的布局。 我的导航列表如下所示：

<ul>
     <li>home</li>
     <li>about</li>
     <li>work</li>
     <li>contact</li>
</ul>

问题是，第一个列表项只需 100px（始终左对齐），其他 3 个列表项均匀分割，因此除了第一个列表项之外的所有列表项是否可以具有均匀宽度（不使用 JavaScript）。

Answer 1

这是我能想到的最简单的方法：

ul { overflow: hidden; padding-left: 100px; position: relative; }
li { width: 33.33%; float: left; }
li:first-child { position: absolute; top: 0; left: 0; width: 100px; }

主要思想是将第一个 li 从流程中取出（position:absolute），并向 li 添加一个 padding-left 到 < code>ul（第一个 li 的空格）。现在，如果我们为其他 li 设置百分比宽度，它们将占用剩余空间。

这是一个 jsFiddle 演示。我在 ul 上添加了红色边框，这表明由于百分比，li 无法准确填充它。

我不确定您想要支持哪些移动浏览器，但除了 :first-child （可以通过在第一个列表项上添加类来解决）我认为它们必须支持我使用的所有内容。

Answer 2

嗯有点笨拙 - 但这似乎有效，它确实需要嵌套列表（单独列表中的第二个 3 个链接）和“主页”链接的跨度，理论上是您需要第一个链接浮动，宽度：100px，那么您需要第二组不浮动并隐藏其溢出，以便该组占用剩余空间..然后您将 3 个链接@ 33% 浮动在非浮动容器内

示例：此处

CSS：

div {
width: 90%;
margin: 0 auto;
}

ul {
margin: 0; padding: 0; list-style: none; /* reset */
float: left;
width: 100%;
}

li {
float: left; 
width: 100%; 
text-align: center;
}

li span {
float: left; 
width: 99px; 
background: #eee; 
border-right: 1px solid #000;
}

ul ul {
float: none; 
overflow: hidden; 
width: auto;
}

li li {
width: 33%; 
background: #ffe; 
border-right: 1px solid #000;
}

HTML：

<div>
<ul>
   <li><span>home</span>
      <ul>
         <li>about</li>
         <li>work</li>
         <li>contact</li>
      </ul>
   </li>
</ul>
</div>

Answer 3

就其价值而言，这就是我在对您的问题发表评论时所想到的：

http://jsfiddle.net /4t9fV/

ul {
    display: table;
    width: 100%;
    background: #ccc;
    table-layout: fixed
}
li {
    display: table-cell;
    text-align: center;
    outline: 1px dashed red
}
li:first-child {
    width: 100px
}