CSS：最後と最初の項目の区切り文字を削除します

Question

私は暗い背景を持つメニューdivを持っています。その中には、左右に1pxのマージンを持つメニュー項目divがいくつかあります。このように私はそれらの間にセパレータを持っています。明らかに、これらは私が欲しくないメニューの左端と右端に現れます。セパレータとして1ピクセルのdivを挿入しないでこれを実現する方法はありますか？申し訳ありませんが、私はそれが十分に説明的だと思った：

はあなたに

編集ありがとうございました。コードは次のとおりです。

<div id="menu"> 
     <a href="#"><div class="menu_item"><img src="imgs/menu/szabalyzat.png" /></div></a> 
     <a href="#"><div class="menu_item"><img src="imgs/menu/profil.png" /></div></a> 
     <a href="#"><div class="menu_item"><img src="imgs/menu/zenekarok.png" /></div></a> 
     <a href="#"><div class="menu_item"><img src="imgs/menu/jelentkezes.png" /></div></a> 
     <a href="#"><div class="menu_item"><img src="imgs/menu/esemenynaptar.png" /></div></a> 
     <a href="#"><div class="menu_item"><img src="imgs/menu/mmmk_estek.png" /></div></a> 
</div> 

IE6非互換性はOKです（ありがたいことに）。

Answer 1

両側に1pxの代わりに2pxの左余白を付けてから、最初の項目の余白を取り除くのにCSS疑似クラス:first-childを使用できませんか？

編集：いくつかの理由のためにそのように私はあなたが、セパレータではなく、背景として国境を使用する必要があるということに同意するが、場合には、あなたがこれを行うには、私の答えは、次のルールが適用されます

Answer 2

これを実現する最も簡単な方法は、最初と最後の要素をカスタムクラスでマークし、それらのマージンを削除することです。

<ul class="menu"> 
    <li class="first">One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li class="last">Four</li> 
</ul> 
<style> 
    .menu li { margin: 0 1px; } 
    .menu .first { margin-left: 0; } 
    .menu .last { margin-right: 0; } 
</style> 

また:first-childのように、複雑なCSSセレクタを使用して試すことができますが、彼らはMSIEの古いバージョンでは動作しません。

OR、あなたの代わりに右側に2つのピクセルの余白を使用し、唯一つの追加クラスで行くことができます：

<ul class="menu"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li class="last">Four</li> 
</ul> 
<style> 
    .menu li { margin-right: 2px; } 
    .menu .last { margin-right: 0; } 
</style> 

Answer 3

視聴者のブラウザの高い割合は、CSS3をサポートしている場合、あなたは:first-child and :last-child pseudo-classesを使用することができます。

Answer 4

:-)まだ有効です別の.menu_item要素の後に続くすべての.menu_item要素に：

.menu_item + .menu_item { 
    border-left: 2px solid black; 
}