我的所有 div 都居中，左右边缘垂直对齐，但是当我添加 ul 和 li 时，我的 .nav 开始具有超出右边缘的背景颜色。知道如何锁定它吗？最大宽度不会阻止它向外流动。
HTML:
<!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=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<title></title>
</head>
<body>
<div class="container">
<div class="header">
<img src="image/logo.png" width="155" height="110" alt="Big Box Property Preservation" />
</div>
<div class="navContainer">
<div class="miniNav">
<img src="image/link_banner.nav.png" width="189" height="44"/>
</div>
<div class="nav">
<ul class="nav">
<li><a href="URL" alt="HOME">HOME</a></li>
<li><a href="URL" alt="ABOUT US">ABOUT US</a></li>
<li><a href="URL" alt="OUR SERVICES">OUR SERVICES</a></li>
<li><a href="URL" alt="CONTACT US">CONTACT US</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="contentBody">
</div>
<div class="sidebar1">
</div>
</div>
<div class="footer" >
</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
body{
top:0;
left:0;
margin:0;
padding:0;
background-color:#666;
}
.container{
position:relative;
margin-top: 0%;
position:relative;
width:1000px;
margin:0px auto;
}
.header{
position:relative;
float:left;
width:900px;
height:120px;
background-color:#CFCA4C;
margin:0px 50px 0px 50px;
}
.navContainer{
position:relative;
float:left;
width:100%;
height:80px;
margin:0px 0px 0px 0px;
}
.miniNav{
height:100%;
position:absolute;
right:0px;
}
.nav{
float:left;
max-width:900px;
width:900px;
height:100%;
background-color:#FFFFFF;
overfow:hidden;
margin: 0 20px 0 50px;
}
ul.nav{
list-style:none;
padding: 0px;
}
ul.nav li{
display:inline;
padding:0px;
float:left;
}
.content{
float:left;
width:900px;
min-height:400px;
background-color:#FFFFFF;
margin:0px 50px 0px 50px;
}
.footer{
float:left;
width:900px;
height:80px;
background-color:#CFCA4C;
margin:0px 50px 0px 50px;
}
最佳答案
div 和 ul 都有类 'nav'。带有 nav 类的 ul 不应该有边距(它们已经添加到 div 中)。所以添加:
ul.nav {margin: 0}
关于css - ul 和 li 将 div 推错位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6593567/