Question

我希望有一个100％宽的列表。但是，每个列表项的开头将是宽度设置宽度。

<div>
    <ul>
        <li><span>This</span> One</li>
        <li><span>This</span> Two</li>
        <li><span>This</span> Three</li>
    </ul>
</div>

Answer 1

如果我正确理解了这个问题，你可以将ul设置为

display:block; width:100%;

你想要它们的元素

样本 http://jsfiddle.net/t2VFe/

如果你的意思不同，请告诉我，我可以回答：）

Answer 2

我认为你的意思是第一个列表项是固定的，但其余的应该是响应式的？请澄清。

我所知道的CSS唯一解决方案是css calc方法。假设您总共有四个项目，而您的第一个项目是200px宽，您可以这样做：

ul > li {
    width: 25%; /* Fall back */
    width: -webkit-calc((100% - 200px) / 3);
    width: -moz-calc((100% - 200px) / 3);
    width: calc((100% - 200px) / 3);
}
ul > li:first-child {width: 200px;}

Fiddle（改编自Shalom Aptekar）。

注意：并非所有浏览器都支持此方法。请参阅here。

响应并固定在一起

2 个答案: