浏览器自动在第二个 li 处加了一个class，导致第一个 li 的宽度变大，本人写的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水平圆角菜单导航</title>
<style type="text/css">
* {margin:0;padding:0;}
ul {list-style:none;border-bottom:5px solid #f60;padding-left:30px;height:30px;margin-top:20px;line-height:30px;}
a {float:left;display:block;width:120px;text-decoration:none;text-align:center;color:black;background-color:#ccc;}
li a.on, a:hover{color:white;background-color:#f60;height:40px;line-height:40px; margin-top:-10px;}
</style>
</head>
<body>
<ul>
<li><a class="on" href="#">首 页</li>
<li><a href="#">关于我们</li>
<li><a href="#">产品展示</li>
<li><a href="#">售后服务</li>
<li><a href="#">联系我们</li>
</ul>
</body>
</html>
慕莱坞9220042
西兰花伟大炮