我的所有div都以垂直對齊的左右邊緣爲中心,但是當我添加ul和li時,我的.nav開始具有延伸超過右手的背景顏色邊緣。任何想法如何鎖定它?最大寬度不會阻止它向外流動。ul和li推div不對齊
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;
}
哇,這樣做了,我甚至沒有意識到我正在調用同一個班級。是的,將邊距設置爲0或重命名類修復問題,謝謝! – theDragon