画像間に縦線を描くにはどうすればいいですか

Question

3つの画像が連続していて、それらの間に縦線を表示したいとします。私は境界線を使用しますが、極端なエッジ（最初のイメージに残っています.3番目のイメージの右側）に表示したくありません。 CSSだけを使ってこれを達成するための最良の戦略は何ですか？

Answer 1

あなたのコレクション内の最後の画像は、国境を持たないことを確認するlast-child擬似セレクタを使用することができます。

img{ 
    border-right:1px solid #000; 
} 

img:last-child 
{ 
    border-right:none; 
} 

Working Example

last-childのブラウザのサポートを変化させることができます。

last-childが利用できないブラウザをサポートする必要がある場合は、最後の画像にクラスを適用し、そのようにフックすることができます。

Answer 2

最高の左の境界を設定し、:first-childため

Answer 3

EMMの最初の二つの最後の二つの画像やボーダー、右側のボーダー左を削除するのですか？

Answer 4

あなたは、行ごとのちょうど3つの画像のうちの破壊を計画していない場合、あなたはそうのように、間に国境や間隔を扱う「ミドル」クラスを導入することができます：

HTML

<div class="box"> 
    <ul> 
     <li><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li> 
     <li class="middle"><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li> 
     <li><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSZ3KCafAVUhanaeaAsG0Q8lzdKKMOo7TP3H1W4TcMEcpVqtKTPVA&t=1" /></li> 
    </ul> 
</div> 

CSS

.box { 
    width:662px; 
} 

.box li { 
    float:left; 
} 

.middle { 
    border:solid #000; 
    border-width:0 1px 0 1px; 
    margin:0 14px; 
    padding:0 10px; 
} 

Demo

この方法はすべてのブラウザで機能しますが、すでに提案されているポスターの中には:last-childセレクタを使用してよりきれいにすることもできます。