順序付けられていないリストがあり、アイテムを追加するときにそれらの間にスペースを追加しようとしています。したがって、最初のアイテムには 5 ピクセルの右マージンがあり、2 番目のアイテムには 10 ピクセルの右マージンがあります。これは、:nth-child(n) 疑似クラスを使用して実現できます。しかし、これは、すべてのアイテムに対してルールを作成する必要があることを意味します (つまり、リストに 6 つのアイテムがある場合、6 つの :nth-child(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
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; }