HTML, CSS - <li> elements do not float

I am trying to get all of the <li> elements in this div:

<div id="nav_bar">
    <ul>
        <li><a href="#1">Nav Item</a></li>
        <li><a href="#2">Nav Item</a></li>
        <li><a href="#3">Nav Item</a></li>
        <li><a href="#4">Nav Item</a></li>
        <li><a href="#5">Nav Item</a></li>
        <li><a href="#6">Nav Item</a开发者_运维技巧></li>
    </ul>
</div>

To be all along one line.

I have the following CSS styles for those elements:

div#nav_bar
{
    width: 25px;
    background-color: #CCC;
}
    div#nav_bar li
    {
        list-style: none;

        padding: 10px;
        height: 20px;
        margin-right: 0px;
        float: left;

        width: 100px;
        background-color: #CCC;
    }

Yet they are underneath each other.

That is because you are setting the width of the div#nav_bar to 25px and hence the li's are floating but overflowing to next line because of the tiny width.

Either set the width to a larger value or remove that property.

Check this: http://jsfiddle.net/d4S2u/

That's a horizontal list and there are many examples.

The simplest would be to use display: inline instead of float: left in your posted code

that cause you are cramping 6