如何在图像之间绘制垂直线但不在边缘

假设您在一排中有三个图像，并且您希望在其中显示一条垂直线。我将使用边框，但我不想在极端边缘（第一个图像上，第三个图像上）显示它。只有使用CSS才能达到这个目标的最佳策略是什么？如何在图像之间绘制垂直线但不在边缘

2011-09-16 Roberto Aloi

您可以使用last-child伪选择，以确保您的集合中的最后一个图像没有边界：

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

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

Working Example

为last-child浏览器支持可能会有所不同。

如果您需要支持最后一个孩子不可用的浏览器，您可以将一个类应用到最后一张图片并以此方式挂钩。

来源

2011-09-16 15:50:09

浏览器支持：['：first-child']（http://www.quirksmode.org/css/contents.html#t17），['：last-child']（http://www.quirksmode.org /css/contents.html#t35） –

最好是设置左边框的:first-child删除

来源

2011-09-16 15:48:17 simoncereska

电解金属锰左边框上的前两个，最后两个图像或右边框？

来源

2011-09-16 15:48:45 holygeek

也许我应该补充说，图像的数量是动态的。 –

如果你不是在每行，你可以引入一个“中间”类来处理的边框和间距之间，像这样打破只有三个图像进行规划：

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选择器来更干净地做到这一点。

来源

2011-09-16 16:27:18

如何在图像之间绘制垂直线但不在边缘

回答

相关问题