Question

我有一个无序列表，我试图在添加项目时在它们之间添加更多空格。因此，第一项具有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; }

Answer 1

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

CSS兄弟元素增加了间距

1 个答案: