Who makes a strip between items in a horizontal menu?

Question

css

The bar is usually smaller than the block height. On stackoverflow, for example, the bar is made as a separate "|" character. Frankly, I also did this, but I always thought that this was not right and there were more rational ways. Now I'm leaning towards background-image.

Answer 1

if the task is to put a vertical line, then why load extra images?
ul li + li:before{content:"|"}
If it's important with the image, then:
ul li + li:before{content:url("line.png")}

Answer 2

Everything is much easier. example
ul {
padding:5px;
}
li {
display:inline;
border-left:1px solid #bbb;
padding:0 2px 0 4px;
}
li:first-child {
border:none;
}


Answer 3

I make it a border, and if you need a strip less than the height of the block, then you can make the nested blocks smaller than the outer one.

Answer 4

Yes, with bg-image:
ul.topNav li {
display: inline;
width: 10em;
height: 36px;
float:right;
padding-top:9px; margin:0px;
background-image: url(../images/header_divider.gif);
background-repeat:no-repeat;
background-position: top left;
}

Answer 5

No background, extra traffic is needed, just as it was already said to register the border, for more liveliness you can make them in different shades, then there will be a “hollow” effect.