UL不是住在一個單行

Question

我試了一下這個說：How to style the UL list to a single line

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

你可以只是float所有的li是在左邊。

其實你是這麼做的。

只需在<div id="bottom_header">上設置width，使其不包裹。

例如：

#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/

EDIT

按下面的評論：

編輯：我設定爲100％的寬度和沒」 t修復（也創建了一個 a nnoying在整個頁面上的所有時間水平線）

取下div的width，並把它添加到ul。也給uloverflow: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; 
} 

OR

ul > li{ 
    display: inline; 
}