4

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

所以，我基本上想要每行 3 个列表项，然后再进入下一行。但是因为第 3 个项目（即所有项目）有一个边距，所以它进入下一行（所以每行只有 2 个项目）。

有没有办法在这种情况下每行有 3 个项目，而无需创建额外的类或使用脚本。

4

6 回答 6

4

使用CSS3 选择器：

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

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

于 2009-07-10T01:51:09.467 回答
2

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

于 2009-07-10T01:45:48.753 回答
0

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

于 2009-07-10T01:46:03.730 回答
0

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

请注意，这仅适用于 3 个项目。第 4 项将应用 10 像素的左边距，第 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>
于 2009-07-10T02:15:28.280 回答
0

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

于 2010-07-11T15:02:20.240 回答
-2 
.divFloat { margin-left: 10px; ...}
.divFloat:First {margin-left: 0; ...}

如果以上不起作用，请尝试将宽度设置为 99px，并确保删除 div 的任何边框。有时浏览器可能会出现一些舍入问题，以至于您无法真正期望它们的行为。

于 2009-07-10T01:41:56.810 回答