Html CSS同级元素增加了间距

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

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

• HTML无法更改
• 仅对CSS选择器/属性回退（如Dean Edwards IE7）、HTML5支持（如shim/v）等使用JavaScript

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中进行计算，因此您必须在JS中计算不断增加的边距，或者在CSS中为一定数量的子级定义边距。像SAS或更少的CSS预处理器可以使这个过程不那么痛苦，但除了没有任何选择之外，这是我们所有人都必须面对的CSS限制：）。

您不能在CSS中进行计算，因此您必须在JS中计算不断增加的边距，或者在CSS中为一定数量的子级定义边距。像SAS或更少的CSS预处理器可以使这一过程不那么痛苦，但除了没有任何选择之外，这是我们所有人都必须面对的CSS限制：）。

因为我对此投了赞成票，所以现在你可以用CSS进行计算，但是psuedo选择器的选项仍然非常有限，而且最初的问题仍然不能用CSS解决。话虽如此，如果你使用React、Vue等现代js框架，这将是微不足道的。因为我对此投了赞成票——现在你可以用CSS进行计算，但psuedo选择器的选项仍然非常有限，而且最初的问题仍然无法用CSS解决。话虽如此，如果您使用React等现代js框架，Vue这将是微不足道的。

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; }