HTML, CSS - <li>элементы не плавают

Question

Я пытаюсь получить все элементы <li> в этом 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>

Чтобы быть все вдоль одной линии.

У меня есть следующие стили CSS для этих элементов:

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;
    }

Все же они находятся друг под другом.

Answer 1

Это потому, что вы устанавливаете ширину div # nav_bar в 25px и, следовательно, li плавают, но переполняются до следующей строки из-за крошечной ширины.

Либо установите ширину на большее значение, либоудалить это свойство.

Проверьте это: http://jsfiddle.net/d4S2u/

Answer 2

, из-за которых вы сжимаете 6

тегов шириной 25 пикселей, поскольку oveflow не указан, они попадают на другую строку удалить ширину div # nav_bar.

Answer 3

Это горизонтальный список, и есть много примеров .

Самое простое будет использовать display: inline вместо float: left в опубликованном коде