如何使HTML列表水平顯示而不是垂直使用CSS？

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