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