css - 各項目間のメニュー行

Question

これは私のレイアウトメニューです：

http://gyazo.com/da1f1954a34694facaaab8ce6c92b267

各メニュー項目の間に黒と白の不透明度の低い線が見えますか? そのサイズで正確に作るにはどうすればよいですか？また、各メニュー項目に十分なスペースがあることも確認できますが、どうすればよいですか?

ありがとう

Answer 1

1) ボーダーには rgba を使用します。

your_li_element_selector {
    border-right: 1px solid rgba(255, 255, 255, 0.5); /* white border with opacity 50% */
    border-left: 1px solid rgba(0, 0, 0, 0.5); /* black border with opacity 50% */
}

最初のメニュー項目の左枠を非表示:

your_li_element_selector:first-child {
    border-left: 0;
}

最後のメニュー項目の右枠を非表示:

your_li_element_selector:last-child {
    border-right: 0;
}

2)要素とその内部のスペースの使用marginとpaddingプロパティ。lia

Answer 2

RGBA を使用して境界左と境界右を実行し、不透明度を下げることができます。余分な境界線を削除する最初の子と最後の子。欠点は、上記のことが一部の古いブラウザーでは機能しないことです。@devが言ったように、最適なのは画像を使用することかもしれません。

RGBA、最初の子と最後の子を使用した例: http://jsfiddle.net/Ra9NT/