2011-07-06 68 views
1

我的所有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; 
} 

回答

1

两个DIV和UL拥有一流的 '导航'。带有类导航的UI不应该有边距(它们已经被添加在div中)。所以加:

​​
+0

哇,这样做了,我甚至没有意识到我正在调用同一个班级。是的,将边距设置为0或重命名类修复问题,谢谢! – theDragon

0

你真正需要做的仅仅是删除了很多特性。

您还应该将.container设置为900px而不是1000px,因为这就是它里面所有东西的宽度。

您可以删除几乎所有float: leftmargin的实例。

块级元素(例如div s)将默认展开以填充可用宽度,因此您无需多次指定width: 900px。这不是行为,如果你float: left元素,但我已经删除了它的实例。因此,记住所有这些,请参阅:http://jsbin.com/ozemoy。只有一个width正在设置:)