UL 不停留在一条线上

Question

我尝试了以下内容：如何设置 UL 列表的样式到一行

display: inline;

并且不起作用！

------------ 我的代码 ------ -----

CSS：

*{
margin:0;
padding:0;
}

ul{
list-style:none;
}

#bottom_header{
background:#0F1923;
border-bottom:5px solid #0F67A1;
font-size:.95em;
font-weight:700;
height:31px;
padding:0 0 0 10px;
/*min-width:800px;*/
}

#bottom_header ul li{
font-size:.95em;
margin:0 0 0 6px;
padding:8px;
float:left;
display:inline;
}

#bottom_header ul li.active{
background:transparent url(./tab_left.png) no-repeat top left;
font-size:1.05em;
margin:-4px 0 auto 5px;
padding:0;
position:relative;
}

#bottom_header ul li.active a{
background:transparent url(./tab_right.png) no-repeat top right;
display:block;
margin:0 0 0 6px;
padding:10px 15px 10px 10px;
}

#bottom_header ul li.active,#bottom_header ul li.active a,#bottom_header ul li a:hover{
color:#fff;
text-decoration:none;
}

#bottom_header ul li,#bottom_header ul li a{
color:#aeaeae;
text-decoration:none;
}

HTML：

<div id="bottom_header">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Forums</a></li>
        <li><a href="#">Something</a></li>
        <li><a href="#">Lorem Ipsum</a></li>
        <li class="left active"><a href="#">Active</a></li>
        <li><a href="#">Another</a></li>
    </ul>
</div>

Answer 1

您可以将所有li浮动到左侧。

事实上，你正在这样做。

只需在

上设置一个宽度，这样它就不会换行。

例如：

#bottom_header{
    background:#0F1923;
    border-bottom:5px solid #0F67A1;
    font-size:.95em;
    font-weight:700;
    height:31px;
    padding:0 0 0 10px;
    width:800px;  /* ADD A WIDTH */
}

示例： http://jsfiddle.net/CtkrZ/

编辑

作为根据您的以下评论：

编辑：我设置了 100% 宽度，但没有解决这个问题（它还创建了一个
整个页面上始终出现烦人的水平线）

从 div 中删除 width 并将其添加到 ul 中。也给 ul 一个 overflow:hidden; 。

ul{
    list-style:none;
    overflow:hidden;
    width:500px;   
}

#bottom_header{
    background:#0F1923;
    border-bottom:5px solid #0F67A1;
    font-size:.95em;
    font-weight:700;
    height:31px;
    padding:0 0 0 10px;
}

更新示例： http://jsfiddle.net/CtkrZ/1/

Answer 2

ul > li{
   float: left;
}

或者

ul > li{
   display: inline;
}