1

我有一个无序列表，我试图在添加项目时在它们之间添加更多空间。所以，第一个项目有 5px 的右边距，第二个有 10px 的右边距，等等。我可以通过使用 :nth-child(n) 伪类来实现这一点。但这意味着我必须为每个项目创建一个规则（即，如果我的列表中有 6 个项目，我必须有 6 个：nth-​​child(n)）。

有没有一种不需要我为每个 li 提供规则的编码方法？

  • HTML 不能更改
  • 仅将 JavaScript 用于 CSS 选择器/属性回退（即 Dean Edwards IE7）、HTML5 支持（即 shim/v）等。

jsFiddle

HTML

<header>
    <nav class="nav1">
        <ul>
            <li><a href="http://example.com/1">Hello World 1</a></li>
            <li><a href="http://example.com/2">Hello World 2</a></li>
            <li><a href="http://example.com/3">Hello World 3</a></li>
            <li><a href="http://example.com/4">Hello</a></li>
        </ul>
    </nav>
    <img src="http://markschamel.com/upload/blue.square.png" />
    <nav class="nav2">
        <ul>
            <li><a href="http://example.com/1">Hello World</a></li>
            <li><a href="http://example.com/2">Hello</a></li>
        </ul>
    </nav>
</header>

CSS

header {
    width: 100%;
    text-align: center;
    background-color: #c87137;
    white-space: nowrap;
}
nav {
    min-width: 40%;
    display: inline-block;
}
nav.nav1 {
    text-align: right;
}
nav.nav2 {
    text-align: left;
}
nav ul {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-color: #ff0000;
}
nav li {
    background-color: #008000;
    border: 1px solid black;
    white-space: nowrap;
}
nav.nav1 li {
    float: right;
}
nav.nav2 li {
    float: left;
}
nav.nav1 li:nth-child(1) { margin-right: 0px; }
nav.nav1 li:nth-child(2) { margin-right: 5px; }
nav.nav1 li:nth-child(3) { margin-right: 10px; }
nav.nav1 li:nth-child(4) { margin-right: 15px; }

nav.nav2 li:nth-child(1) { margin-left: 0px; }
nav.nav2 li:nth-child(2) { margin-left: 5px; }
nav.nav2 li:nth-child(3) { margin-left: 10px; }
nav.nav2 li:nth-child(4) { margin-left: 15px; }
4

1 回答 1

1

您不能在 CSS 中进行计算，因此您要么必须在 JS 中计算增加的​​边距，要么在 CSS 中为一组子项定义边距。像 SAS 或 LESS 这样的 CSS 预处理器可以使这个过程不那么痛苦，但除此之外没有任何选择，这是我们所有人都必须忍受的 CSS 限制:)。

于 2012-04-06T06:27:25.300 回答