CSS Sibling Elements Erhöhter Abstand

Question

Ich habe eine ungeordnete Liste und ich versuche, mehr Platz zwischen ihnen hinzuzufügen, während ich Elemente hinzufüge. Das erste Element hat also einen rechten Rand von 5 Pixeln, das zweite einen rechten Rand von 10 Pixeln usw. Ich kann dies erreichen, indem ich die Pseudo-Klasse: nth-child (n) verwende. Aber das bedeutet, dass ich für jeden Gegenstand eine Regel erstellen muss (d. H. Wenn ich 6 Gegenstände in meiner Liste habe, muss ich 6: n-te (n)) haben.

Gibt es eine Möglichkeit, dies zu codieren, die nicht erfordert, dass ich für jedes li eine Regel bereitstelle?

• Die HTML kann nicht
• Nur JavaScript für CSS-Selektor/property Rückfall (dh Dean Edwards IE7), HTML5-Unterstützung (dh Shim/v) usw.

jsFiddle

verwenden ändern

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

Sie keine Berechnungen in CSS tun können, so dass Sie entweder die steigenden Margen in JS oder definieren die Ränder für eine festgelegte Anzahl von Kindern in CSS zu berechnen. Ein CSS-Präprozessor wie SAS oder LESS könnte diesen Prozess weniger schmerzhaft machen, aber abgesehen davon gibt es keine Optionen, es sind CSS-Einschränkungen, die wir alle leben müssen :).