分类目录归档：CSS

使用css创建水平菜单的3种方法

发表于由

使用html中的<ul>，<li>和<a>等元素创建出的菜单，默认情况下，每个item前面有黑色marker，并且每个item占据一行。如何通过设定css，将其转变为水平菜单？有如下3种方法。

1. 使用float属性：对<li>元素设置CSS: float: left。这样，<li>元素将水平排列，不会换行。注意：使用float时，必须对容器（这里是<ul>）设置overflow:hidden。

      <!DOCTYPE html>
<html>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul li {
  float: left;
}

ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: white;
}

ul li a:hover {
  background-color: red;
}


</style>
<body>

<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
</body>
</html>

      2. 将<li>元素设置CSS: display: inline-block。因为<li>是block level元素，会以一个新行开始，并且占用全部宽度。通过对其设置 display: inline-block，它就会变得像inline元素一样，只会占据必要宽度，从而多个<li>元素就能够实现水平排列。

      <!DOCTYPE html>
<html>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

ul li {
  display: inline-block;
}

ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: white;
}

ul li a:hover {
  background-color: red;
}


</style>
<body>

<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
</body>
</html>

      3. 对<ul>使用flex布局。<ul>包含的<li>就会水平排列。

      <!DOCTYPE html>
<html>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  display: flex;
}

ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: white;
}

ul li a:hover {
  background-color: red;
}


</style>
<body>

<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
</body>
</html>

      发表在 CSS