HTML，CSS-<li>元素不浮动

问题描述

| 我正在尝试获取此div中的所有

<li>

元素：

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

但是它们彼此在下面。     

解决方法

        那是因为您将div＃nav_bar的宽度设置为25px，因此li'是浮动的，但由于宽度太小而溢出到下一行。 将宽度设置为更大的值或删除该属性。 检查此：http://jsfiddle.net/d4S2u/     ,        那是一个水平列表，并且有很多示例。 最简单的方法是在发布的代码中使用

display: inline

而不是

float: left

    ,        这会导致您以25px的宽度限制6个标记，因为未指定oveflow，所以它们到达另一行。删除div＃nav_bar的宽度。