CSS 만 사용하여 HTML 목록을 세로로 표시하는 대신 가로로 표시하는 방법은 무엇입니까?

Question

HTML 목록으로 만든 메뉴를 가로로 나타나게하고 싶기 때문에이 기능이 필요합니다.

페이지의 레이아웃을 변경하기 시작할 때 지저분해질 수 있으므로 절대 위치 지정을 사용하지 않는 것이 좋습니다.

또한 하위 목록의 들여 쓰기를 제거하고 싶습니다. 가능한가?

Answer 1

당신은 여기

#menu ul{ 
 
    list-style: none; 
 
} 
 
#menu li{ 
 
    display: inline; 
 
} 
 
\t

<div id="menu"> 
 
    <ul> 
 
    <li>First menu item</li> 
 
    <li>Second menu item</li> 
 
    <li>Third menu item</li> 
 
    </ul> 
 
</div>

Answer 2

매우 간단합니다 :

ul.yourlist li { float:left; } 

또는

이

ul.yourlist li { display:inline; } 

Answer 3

는 아래 같은 것을 사용해야합니다 이 질문에 대한 또 하나의 길.

DEMO

HTML

<div id="menu"> 
    <ul> 
    <li>First menu item</li> 
    <li>Second menu item</li> 
    <li>Third menu item</li> 
    </ul> 
</div> 

CSS

#menu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#menu li { 
    display: inline-block; 
}