水平導航欄/無序列表

Question

我使用<ul>創建了一個簡單的導航欄，並試圖使<li>項目堆棧水平而不是垂直。我將display:inline代碼放在我的css中，但列表項仍然保持垂直。任何幫助，將不勝感激！

<div id="nav"> 
    <ul> 
     <li> Home </li> 
     <li> Farm Park </li> 
     <li> Cafe </li> 
     <li> Goods </li> 
     <li> Gallery </li> 
     <li> Contact </li> 
    </ul> 
</div> 

和我的CSS只是

#li { 
    display: inline; 
} 

Answer 1

選擇是li，不#li。 #li選擇器適用於id ="li"的元素。所述li選擇器適用於<li>元件

li { 
 
    display: inline-block; 
 
}

<div id="nav"> 
 
    <ul> 
 
    <li> Home </li> 
 
    <li> Farm Park </li> 
 
    <li> Cafe </li> 
 
    <li> Goods </li> 
 
    <li> Gallery </li> 
 
    <li> Contact </li> 
 
    </ul> 
 
</div>

Answer 2

變化

#li { 
    display: inline; 
} 

到

#nav li { 
    display: inline; 
} 

或

li { 
    display: inline; 
}