先贴代码我多加了个边框方便观察：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>彻底弄懂CSS盒子模式(导航栏实例详解)</title>
<style type="text/css">
<!--
* {
margin: 0px;
padding: 0px;
}
#nav {
border: 1px dashed #0099CC;
background: url(
) repeat-y;
width: 200px;
overflow: hidden;
}
#nav li {
border: 1px dashed #000000;
background: url(
) no-repeat left center ;
height: 35px;
width: 190px;
padding-top:15px;
}
#nav a {
border: 1px dashed #ff0000;
background: url(
) no-repeat left center;
text-decoration: none;
height: 20px;
width: 155px;
display: block;
padding: 0px 0px 0px 5px;
font-weight: bold;
font-size: 9pt;
line-height: 20px;
color: #630;
border-left:10px solid #f90;
}
#nav a:hover {
background-image: url(
);
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<ul id="nav">
<li>
<a href="#">彻底弄懂CSS盒子模式1</a>
</li>
<li>
<a href="#">彻底弄懂CSS盒子模式2</a>
</li>
<li>
<a href="#">彻底弄懂CSS盒子模式3</a>
</li>
<li>
<a href="#">彻底弄懂CSS盒子模式4</a>
</li>
<li>
<a href="#">彻底弄懂CSS盒子模式5</a>
</li>
</ul>
</body>
</html>
**********************************分割线**************************************
#nav a {
background: url(
) no-repeat left center;
text-decoration: none;
height: 20px;
width: 155px;
display: block;
float: right; ----------------------------------------这里的float去了以后边框之间就压一起了，本来有间隔的，但是a
是最里面的的盒子怎么也控制了外面的li盒子？
padding: 0px 0px 0px 5px;
font-weight: bold;
font-size: 9pt;
line-height: 20px;
color: #630;
border-left:10px solid #f90;
}
