水平导航栏/无序列表

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>元素

＆＃13;

＆＃13;

li {
  display: inline-block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

更改

#li {
     display: inline;
 }

到

#nav li {
     display: inline;
 }

或

li {
     display: inline;
 }