Need help with <ul> and <li>

Hey guys.

In my navigation menu, I need the <a> links to display as a block and be aligned horizontally so the links go across the page. This is my markup so far:

#menu {
    padding:0;
    margin:0;
}

#menu li {
    display: inline;
    list-style-type: none;
}

#menu a, #menu a:visited {
    display: block;
    width: 100px;
    height: 30px;
    font-family: Verdana, Geneva, sans-serif;
    letter-spacing: -1px;
    color: #CCC;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
}

#menu a:active {
    background-image: url(images/active.gif);
}

Code (markup):

And the HTML:

<div id="container">
    <div id="navsbar">   
        <ul id="menu">
            <li><a href="#nogo">Home</a></li>
            <li><a href="#nogo">Features</a></li>
            <li><a href="#nogo">Login</a></li>
            <li><a href="#nogo">Support</a></li>
        </ul>
    </div>
</div>

Code (markup):

I just need the list to have the "display: inline;" attribute while still having the block (as I can't see any other way of doing what I need to do).

Cheers.

 

a way to do what? did you try to use float:left; for the li's ? this Is what I do and it works pretty good

 

Use the display: inline-block

but as all old browsers don't support it,
you may try using a combination of display: inline and float: left for better compatibility.

 

hi please check below code

CSS Code:

#menu {
padding:0;
margin:0;
float: left;
}

#menu li {
display: inline;
list-style-type: none;
float: left;
}

#menu a, #menu a:visited {
display: block;
width: 100px;
height: 30px;
font-family: Verdana, Geneva, sans-serif;
letter-spacing: -1px;
color: #CCC;
font-size: 14px;
text-decoration: none;
text-align: center;
}

#menu a:active {
background-image: url(images/active.gif);
}


HTML Code

<div id="container">
<div id="navsbar">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Features</a></li>
<li><a href="#nogo">Login</a></li>
<li><a href="#nogo">Support</a></li>
</ul>
</div>
</div>

 

Yeah, figured it out about 20 minutes after I posted, it works using float: left;

Cheers.