Question

假设您连续有三个图像，并且您希望在它们之间显示一条垂直线。我会使用边框，但我不想在极端边缘上显示（左边是第一张图片，右边是第三张图片）。通过仅使用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

如果你不计划每行只删除三个图像，你可以引入一个“中间”类来处理边界和间距，如下所示：

<强> 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选择器更干净地完成此操作。

Answer 3

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

Answer 4

Emm border-left在最后两个图像上还是在前两个边框右边？

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

4 个答案: