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 should use List for this kind of stuff, but I don't know how to apply css style with cross-browser compatibility.

Can you give to me an example of that menu with List?

回答1:

This is how I'd do it:

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

<ul class="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
}

回答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

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

CSS

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

DEMO: jsfiddle

回答3:

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

Looks like you want something like this one.

回答4:

Try this...

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

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


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


       border-right:1px solid red;

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

回答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

回答6:

Space between the borders do this =

Put a border on the right side of the li and the second button put a border on the left side of the li.

Now add margin-left (or margin-right) and see it expand.

This worked in my case.

Good luck.