CSS兄弟元素增加间距

我有一个无序列表，我试图添加更多的空间，因为我添加项目。所以，第一项有5px的右边距，第二项有10px的右边距，等等。我可以通过使用：nth-child（n）伪类来实现。但是这意味着我必须为每个项目创建一个规则（即如果我的列表中有6个项目，我必须有6个：nth-child（n））。CSS兄弟元素增加间距

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

的HTML不能改变
仅使用JavaScript CSS选择器/属性回退（即院长爱德华兹IE7），HTML5的支持（即垫片/ 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; }

来源

2012-04-06 w0lf42

你不能这样做在CSS计算，所以你要么必须计算JS的幅度越来越大或定义的利润率在CSS孩子的定数。像SAS或LESS这样的CSS预处理器可以使这个过程变得不那么痛苦，但除此之外没有任何选择，它的CSS限制我们都必须忍受:)。

来源

2012-04-06 06:27:25 sg3s

CSS兄弟元素增加间距

回答

相关问题