关于UL添加下边框的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style type="text/css">
*{margin:0;padding:0;font-size:14px;}
ul{list-style:none;border-bottom:5px solid #CC0033;}
li{float:left;}
a{text-decoration:none;display:block;height:30px;line-height:30px;background-color:#ccc;margin-bottom:1px;width:100px;text-indent:10px;}
</style>
</head>
<body>
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">新闻快讯</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
按照视频一样的代码，为什下边框的线并没有出现在导航栏的下方，而是被挤到了右边去了 ，不应该是在《li》处设置边框吗 为什么视频是在《ul》设置下边框？？？
