Vertical dividers in the UL horizontal menu

Question

I'm trying to create a horizontal navigation bar (no drop-down list, only a horizontal list), but I'm having trouble finding the best way to add vertical dividers between menu items.

Actual HTML is as follows:

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> 

The current CSS is as follows:

 .menu li { display: inline; margin-left: 25px; padding-left: 25px; } 

Between each menu item, I want a small image as a vertical separator, except that I do not want the separator to appear before the first element, and I do not want the separator to appear after the second element.

The end result should look something like this:

Point 1 | Point 2 | Point 3 | Point 4 | Point 5

Just replace the handset with the actual image.

I tried different ways - I tried setting the list-style-image property, but the image did not appear. I also tried to set the separator as the background, which actually more or less worked, except that he made the first element in front of it before it with a separator.

Answer 1

Pretty and simple, without any "need to specify the first element." CSS is more powerful than most people think (e.g. first-child:before great!). But this is by far the cleanest and most correct way to do this, at least in my opinion, it is.

 #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li:not(:first-child):before { content: " | "; } 

Now just use a simple unordered list in HTML and it will populate it for you. HTML should look like this:

 <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Support</a></li> </ul> </div><!-- navigation --> 

The result will be like this:

HOME | ABOUT COMPANY | Support

Now you can expand unlimitedly and never worry about order, link changes or your first post. All this is automated and works great!

Answer 2

try this one looking for:

 li+li { border-left: 1px solid #000000 } 

this will only affect related elements li

found here

Answer 3

This can also be done using CSS: pseudo-classes. The support is not so wide, and the answer above gives you the same result, but pure CSS-y =)

 .ULHMenu li { border-left: solid 2px black; } .ULHMenu li:first-child { border: 0px; } 

OR

 .ULHMenu li { border-right: solid 2px black; } .ULHMenu li:last-child { border: 0px; } 

See: http://www.quirksmode.org/css/firstchild.html
Or: http://www.w3schools.com/cssref/sel_firstchild.asp

Answer 4

I think your best snapshot is the border-left property, which is assigned to each of the li except the first (you would need to give the first class named first and explicitly remove the border for that).

Even if you programmatically generate <li> , the purpose of the first class should be simple.

Answer 5

A simpler solution would be to simply add #navigation ul li~li { border-left: 1px solid #857D7A; } #navigation ul li~li { border-left: 1px solid #857D7A; }

Answer 6

 .last { border-right: none .last { border-right: none !important; } 

Answer 7

This works fine for me:

NB I am using SCSS BEM / OCSS syntax

 #navigation{ li{ &:after{ content: '|'; // use content for box-sizing text-indent: -999999px; // Hide the content display: block; float: right; // Position width: 1px; height: 100%; // The 100% of parent (li) background: black; // The color margin: { left: 5px; right: 5px; } } &:last-child{ &:after{ content: none; } } } } 

Answer 8

I do it, as Pekka says. Put an inline style on each <li> :

 style="border-right: solid 1px #555; border-left: solid 1px #111;" 

Remove the first and last, if necessary.