How Can I Do This Menu Using List And Css?

I have a sort of menu like this one, but how you can see the code is not so 'well'. I'd like that margin between word and border is always 5px for example, for every word. I know I

Solution 1:

This is how I'd do it:

See:http://jsfiddle.net/thirtydot/554BT/3/

<ulclass="menu"><li>Home</li><li>Incredible</li><li>One</li></ul>

.menu { 
    width:545px;
    float:left;
    margin: 0;
    padding: 0;
    list-style: none
}
.menu li {
    float: left;
    text-align: center;
    padding: 0 15px;
    border-left: 2px solid red
}
.menu li:first-child {
    border: 0
}

Solution 2:

This is the way I would do it, keeping it as easy (simple) as possible. It probably doesn't get any less complex than this:

HTML

<ulid="menu"><li>Home</li><li>Incredible</li><li>One</li></ul>

CSS

#menu {
    list-style-type: none; 
}
#menuli {
    display: inline-block;
    padding: 010px;
    border-left: 2px solid red;
} 
#menuli:first-child {
    border-left: none;
}

DEMO: jsfiddle

Solution 3:

Check out Listmatic for examples of all the basic list layouts.

Looks like you want something like this one.

Solution 4:

Try this...

fiddle:http://jsfiddle.net/anish/Laqqn/

<styletype="text/css">.menu
    {
        width:500px;


    }
    .menuli
    {
        width:100px;
        text-align:center;
        float:left;


       border-right:1px solid red;

    }
    </style><ulclass="menu"><li>Home</li><li>Incredible</li><li>One</li></ul>

Solution 5:

A CSS3 example, not really cross browser as it uses CSS3 pseudo-selectors CSS3 List menu

This other example uses a pipe character to separate the links and is cross browser safe: CSS2 List menu