Question

我正在寻找一种快速的跨浏览器解决方案，以满足我对汽车保证金的需求。

我有一个简单的清单：

<ul>
     <li>text</li>
     <li>text</li>
     <li class="possibly_last">text</li>
</ul>

宽度为600px。

我需要的是CSS代码，以确保每个<li>之间有一个均匀的余量。

这样它们可以均匀地延伸到整个600px。

我可能需要作为“最后”课程，但那没关系。

我只想要一种浏览器友好的方式来做到这一点。

任何帮助都会很棒，谢谢！

Answer 1

试试这个：

<style>
li {
  display: block;
  float: left;
  width: 32%;
}
</style>

如果这不起作用，请尝试：

<style>
li {
  display: block;
  float: left;
  width: 200px; // or less
}
</style>

Answer 2

我认为你的意思是在最后li之后你不想要保证金？在这种情况下，请使用CSS :last-child选择器：

ul li
{
    margin-right: 10px;
    width: 190px;       // 190px = 200px - margin width
    display: inline-block;
    zoom: 1;
    *display: inline;
}

ul li:last-child
{
    margin-right: 0px;
}

请注意，除IE9外，任何Internet Explorer都会 NOT 。对不起： - （

作为修复，您可以使用JavaScript（尤其是jQuery）来编辑最后一个孩子的CSS。

此处的示例：http://jsfiddle.net/WtLAm/2/

Answer 3

我认为这不能用边距做，我建议你这个解决方案： http://jsfiddle.net/wY5t6/ 的CSS：

ul li {
    margin: 0;
    display: block;
    float: left;
    width: 200px;
    text-align: center;
}
ul {
    width: 600px;
    overflow:hidden;
}

如果你需要在列表项上设置填充，背景等，你可以这样做： http://jsfiddle.net/wY5t6/1/ HTML：

<ul>
    <li><span>text</span></li>
    <li><span>text</span></li>
    <li class="possibly_last"><span>text</span></li>
</ul>

CSS：

ul li {
    margin: 0;
    display: block;
    float: left;
    width: 200px;
    text-align: center;
}
ul {
    border: 1px green dotted;
    width: 600px;
    overflow:hidden;
}

li span {
    background: yellow;
    padding: 5px;
}

Answer 4

您打算将列表项浮动，以便它们水平拉伸以填充ul那样的方式吗？如果是这样的话，比如

<style type="text/css" media="screen">
    ul {width: 600px;}
    li {display: inline; float: left; width: 33%;}
</style>

会起作用。

CSS列表问题

4 个答案: