UL ne pas rester dans une seule ligne

Question

J'ai essayé ce que cela dit: How to style the UL list to a single line

display: inline; 

et ne fonctionne pas!

----------- ----------- Mon code

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

Vous pouvez simplement float tous les li s à gauche.

En fait, c'est ce que vous faites.

Il suffit de définir un width sur le <div id="bottom_header"> afin qu'il ne s'enroule pas.

Par exemple:

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

Exemple: http://jsfiddle.net/CtkrZ/

EDIT

Selon votre commentaire ci-dessous:

modifier: Je mets une largeur de 100% et n » t réparer cela (aussi créé un un nnoying ligne horizontale en tout temps sur la page entière)

Retirez le width du div et l'ajouter à la ul. Donnez le ul aussi 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; 
} 

Mise à jour Exemple: http://jsfiddle.net/CtkrZ/1/

Answer 2

ul > li{ 
    float: left; 
} 

OU

ul > li{ 
    display: inline; 
}