水平导航栏/无序列表

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