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并向ul添加填充左侧（第一个li的空格）。现在，如果我们为其他li设置百分比宽度，它们将占用剩余空间。

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

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

Answer 2

嗯有点cludgy - 但这似乎工作，它确实需要嵌套列表（第二个3链接在单独的列表中）和跨度为“home”链接，理论是你需要第一个链接浮动，宽度：100px，然后你需要第二组不浮动并隐藏它们的溢出，这样组占用剩余的空间..然后你浮动3个链接@ 33％在非浮动容器内

示例：HERE

<强> 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
}

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

3 个答案:

示例：HERE