Question

我有一个HTML文档，我希望水平显示一个简单的列表。有很多关于如何做到这一点的例子，但我的列表不会水平显示：

HTML：

<div id="main_menu">
   <ul>
      <li><a href="#1">Link 1</a></li>
      <li><a href="#2">Link 2</a></li>
      <li><a href="#3">Link 3</a></li>
   </ul>
</div>

CSS：

#main_menu ul{  
    margin: 0;
    padding: 0;
    list-style-type: none;

}

我不明白 - 为什么它没有水平显示？

我正在使用Chrome进行测试。

Answer 1

您需要浮动列表项或将其显示更改为内联块：

示例1 - 浮动

＆＃13;

#main_menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li {
  float: left;
}

＆＃13;

<div id="main_menu">
  <ul>
    <li><a href="#1">Link 1</a>
    </li>
    <li><a href="#2">Link 2</a>
    </li>
    <li><a href="#3">Link 3</a>
    </li>
  </ul>
</div>

＆＃13;

示例2 - 显示：内联块

＆＃13;

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

＆＃13;

<div id="main_menu">
  <ul>
    <li><a href="#1">Link 1</a>
    </li>
    <li><a href="#2">Link 2</a>
    </li>
    <li><a href="#3">Link 3</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

要使列表显示为水平，请将<li>向左浮动，或显示inline或inline-block：

#main_menu li{
    display:inline-block;
}

JSFiddle Demo

Answer 3

请在你的li元素上使用float：left来水平浮动它们。请参考以下示例 https://jsfiddle.net/osha90/n2ujqzvo/

<div id="main_menu">
 <ul>
  <li><a href="#1">Link 1</a></li>
  <li><a href="#2">Link 2</a></li>
  <li><a href="#3">Link 3</a></li>
 </ul>
</div>

css

#main_menu ul{  
        margin: 0;
        padding: 0;
        list-style-type: none;

    }
    #main_menu ul li{
      float:left;
      width: 33.33%;
      text-align: center;
      box-sizing: border-box;
      border: 1px solid #d2d2d2;
    }
    #main_menu ul li a{
      text-decoration: none;
    }

Answer 4

有多个选项。

浮动：

#main_menu ul li{
    float:left;
}

Flex Box：

#main_menu ul {
    display: flex;
    justify-content: space-around; /* or other */
}

显示内嵌区块：

#main_menu ul {
    display: inline-block;
    justify-content: space-around; /* or other */
}

UL标签列表项不会水平显示

4 个答案: