Question

我有一个320px宽的div。我是左侧的浮动列表项，每个项目的宽度为100px。然后我想在每个列表项的右边有一个10px的右边距。所有其他边距和填充都已删除。

所以，在进入下一行之前，我基本上每行需要3个列表项。但是因为第3个项目（即所有项目）都有一个保证金权限，所以它会进入下一行（因此每行只有2个项目）。

有没有办法在这个实例中每行包含3个项目，而无需创建额外的类或使用脚本。

Answer 1

ul:nth-child(3n)   { margin-left: 0px; ... }
ul:nth-child(3n+1) { margin-left: 10px; ... }
ul:nth-child(3n+2) { margin-left: 10px; ... }

由于缺乏CSS3支持，可能不实用。

Answer 2

你的div必须是320px宽吗？最简单的解决方案是使div 330px宽。如果其容器只有320像素，则可以使用类似margin-right: -10px的内容。

Answer 3

据我所知，如果不使用类来识别每一行中的最后一项（如果使用脚本语言生成列表，则可以轻松完成）是不可能的。否则，您可以将margin-left划分为20px / 3 = 6px或将<div>的宽度增加到330px，以便它可以容纳额外的边距。

Answer 4

这是一个适用于IE6及以上的选项（可能是IE5 + - 我还没有测试过。）

请注意，这仅适用于3个项目。第4项将获得10px左边距，此时第6项将被推到下一行。我相信比我更聪明的人可以解决这个问题。

我正在使用表达式（我猜是脚本 - 但可能适合你）和条件注释来获取IE6中的第一个孩子。享受：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Columns test</title>
    <style type="text/css" media="screen">
        #container {
            border: 1px solid red;
            width: 320px;
            overflow: hidden;
        }
        .column {
            margin-left: 10px;
            width: 100px;
            float: left;
            background: #ccc;
        }
        .column:first-child {
            margin-left: 0;
        }
    </style>
    <!--[if IE 6]>
    <style type="text/css" media="screen">
        .column {
            margin-left: expression((this===this.parentNode.childNodes[0])?"0":"10px");
            display: inline;
        }
    </style>
    <![endif]-->
</head>
<body>
    <div id="container">
        <div class="column">
            <p>Column 1</p>
        </div>
        <div class="column">
            <p>Column 2</p>
        </div>
        <div class="column">
            <p>Column 3</p>
        </div>
    </div>
</body>
</html>

Answer 5

使用wordpress可以通过向“wordpress循环”添加几个位来完成...解决方案：http://wordpress.org/support/topic/368646

Answer 6

.divFloat { margin-left: 10px; ...}
.divFloat:First {margin-left: 0; ...}

如果上面没有工作，请尝试将宽度改为99px，并确保删除div的任何边框。有时候浏览器可能会有一些舍入或者问题，以至于你无法真正期待他们的行为。

CSS中的浮动列表边距

6 个答案: