UL 내가이 말을하려고

Question

하나 개의 라인에 머물 수 없습니다!

----------- 내 코드 -----------

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/

편집하여 아래의 의견으로 당

:

편집 : 나는 100 % 폭을 설정하고 didn를 ' 그것을 고치지 마라. (또한 a를 만들었다. 전체 페이지에서 항상 수평 라인) nnoying

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