CSS Spread <Li> Horizontally Across <Ul>

Horizontally centering/evenly distributed li inside of ul inside a div

This allows a widthless centered dynamic ul if you don't want to specify 90% width:

<!doctype html>
<div class="navbar">
    <div id="for-ie">
        <ul>
            <li><a href="Home">Home</a></li>
            <li><a href="Discounts">Discounts</a></li>
            <li><a href="Contact">Contact Us</a></li>
            <li><a href="About">About Us</a></li>
        </ul>
    </div>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    border:1px solid red;
    display:table;
    overflow: hidden;
}
.navbar li{
    float: left;
    padding: 2px;
    width: 150px;
    margin-left: auto ;
    margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
    #for-ie { text-align:center; }
    #for-ie ul { display:inline-block; }
    #for-ie ul { display:inline; }
</style>
<![endif]-->

Tested in IE6, FX 3.

EDIT: Alternate style without the extraneous element:

<!doctype html>
<div class="navbar">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Discounts">Discounts</a></li>
        <li><a href="Contact">Contact Us</a></li>
        <li><a href="About">About Us</a></li>
    </ul>
</div>
<style>
.navbar {
    width: 100%;
    margin-left: auto ;
    margin-right: auto ;
    background-color: #ABCDEF;
}
.navbar ul {
    list-style-type: none; /*to remove bullets*/
    text-align: center;
    padding: 0px;
    zoom:1;
    border:1px solid red;
    overflow: hidden;
}
.navbar li{
    padding: 2px;
    width: 150px;
    display:inline-block;
}
</style>
<!--[if IE]>
<style>
    .navbar li { display:inline; }
</style>
<![endif]-->

Make li elements stack horizontally

Add another container that handles the scrolling of its content
Make the li be display: inline-block so they'll stack next to each other
Set white-space: nowrap on the ul so the li elements will stay on one line in its narrow container

http://jsfiddle.net/EvilOatmeal/nxGG2/2/

CSS! Horizontal resizable menu ul li, how to spread it on full width of the display?

You can add white-space: nowrap; to your UL element http://jsfiddle.net/jvrCH/
But in this case menu elements will go off screen when not enough space.

How to display a list in horizontal groups of li elements?

Floats can do this quite simply.

You just clear the float after every this li

ul {  list-style-type: none;}li {  float: left;  padding: 0 1em;}li:nth-child(3n+1) {  clear: both;}

<ul>  <li>Item 1</li>  <li>Item 2</li>  <li>Item 3</li>  <li>Item 4</li>  <li>Item 5</li>  <li>Item 6</li>  <li>Item 7</li>  <li>Item 8</li>  <li>Item 9</li></ul>

Horizontal list items - fit to 100% with even spacing

The new CSS flexbox specification would be the solution to your problem :)

ul {    display: flex;    align-items: stretch; /* Default */    justify-content: space-between;    width: 100%;    background: #cacaca;    margin: 0;    padding: 0;}li {    display: block;    flex: 0 1 auto; /* Default */    list-style-type: none;    background: #fafafa;}

<ul>    <li>This is menu item 1</li>    <li>Number 2</li>    <li>Item Number 3</li>    <li>Menu 4</li></ul>

How do I justify a horizontal list?

Modern Approach - CSS3 Flexboxes

Now that we have CSS3 flexboxes, you no longer need to resort to tricks and workarounds in order to make this work. Fortunately, browser support has come a long way, and most of us can start using flexboxes.

Just set the parent element's display to flex and then change the justify-content property to either space-between or space-around in order to add space between/around the children flexbox items. Then add additional vendor prefixes for more browser support.

Using justify-content: space-between - (example here):

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
    justify-content: space-between;
}

<ul class="menu">
    <li>About</li>
    <li>Contact</li>
    <li>Contact Longer Link</li>
    <li>Contact</li>
</ul>