CODEWITHSUNDEEP
css
Roberto Aloi
Roberto Aloi

Reputation: 30985

How to draw a vertical line between images but not at the edges

Say you have three images in a row and you want to display a vertical line among them. I would use a border, but I don't want to display it on the extreme edges (left on the first image, right on the third image). What's the best strategy to achieve this by using CSS only?

Upvotes: 2

Views: 3679

Answers (4)

Andres I Perez
Andres I Perez

Reputation: 75379

If you're not planning on breaking out of just three images per row you can introduce a "middle" class that handles the borders and spacing in between, like so:

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

This method works across all browsers, but as some of the posters already suggested you can also use the :last-child selector to do it more cleanly.

Upvotes: 1

Jamie Dixon
Jamie Dixon

Reputation: 53991

You could use the last-child pseudo selector to make sure the last image in your collection doesn't have the border:

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

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

Working Example

Browser support for last-child may vary.

If you need to support browsers where last-child isn't available you could apply a class to the last image and hook into it that way.

Upvotes: 4

holygeek
holygeek

Reputation: 16185

Emm border-left on the last two images or border-right on the first two?

Upvotes: 0

simoncereska
simoncereska

Reputation: 3043

best is to set left border and for :first-child remove

Upvotes: 0

Related Questions