鲁达 今天小编带大家来做水平菜单效果的实战案例！
简单来说就是做一个菜单，水平菜单！
在我们写网页的时候都是需要用到菜单这个功能，菜单能很好的解决用户的选择需求，那么小编说的水平菜单，大家可以理解为水平居中，当然没有做居中，居中刚刚做的时候忘记加上去了！
那么我们来看一下这个水平居中菜单的实战案例图：
实战案例图
那么上图这个就是一个水平菜单，这个菜单是小编花了一两分钟写的！
虽然简单但是还可以咯！
那么接下来我们看一下这个实战案例的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程)</title>
<style>
ul{float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;}
a{float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>
<body>
<ul>
<li><a href="#">第一个</a></li>
<li><a href="#">第二个</a></li>
<li><a href="#">第三个</a></li>
<li><a href="#">第四个</a></li>
</ul><br><br>
<p>
上面的示例中,我们让ul元素和元素浮动。<br>
li元素将显示为内联元素(没有换行符的元素之前或之后)。<br>
这迫使列表为一行。<br>
ul元素的宽度的100%,每一个超链接列表的宽度6em(当前字体大小的6倍)。<br>
我们添加一些颜色和边界使其更高档。</p>
</body>
</html>