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兄弟元素增加間距

回答

相關問題