2011-07-06 69 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正在設置:)