Question

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

The 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 divider, except that I don t want a divider shown before the first item and I don t want a divider shown after the second item.

The end result should look something like this:

Item 1 | Item 2 | Item 3 | Item 4 | Item 5

Just replacing the pipe with an actual image.

I ve tried different ways - I ve tried setting the list-style-image property, but the image didn t show up. I ve also tried setting the divider as a background which actually more or less worked except that it made the first item have a divider in front of it.

Answer 1

Quite and simple without any "having to specify the first element". CSS is more powerful than most think (e.g. the first-child:before is great!). But this is by far the cleanest and most proper 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 ll 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 just like this:

HOME | ABOUT US | SUPPORT

Now you can indefinitely expand and never have to worry about order, changing links, or your first entry. It s all automated and works great!

Answer 2

try this one, seeker:

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

this will affect only adjecent li elements

found here

Answer 3

This can also be done via CSS:pseudo-classes. Support isn t quite as wide and the answer above gives you the same result, but it s 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 shot is a border-left property that is assigned to each one of the lis except the first one (You would have to give the first one a class named first and explicitly remove the border for that).

Even if you are generating the <li> programmatically, assigning a first class should be easy.

Answer 5

A simpler solution would be to just add #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 m using ~~BEM/OCSS~~ SCSS 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;"

Take off first and last as appropriate.

友情链接