導航欄的寬度比其父格

我試圖創建應符合所謂#page_wrap ITD寬度DIV ID內的導航欄高爲980px，當我與螢火蟲試過我看到那#nav選擇大於#page_wrap。爲什麼這發生了。導航欄的寬度比其父格

我的本意是導航欄不應該#page_wrap

這裏外面走的是代碼

HTML

<div id="page_wrap"> 
     <ul id="nav"> 
      <li><a href="#">Menu1</a></li> 
      <li><a href="#">Menu2</a></li> 
      <li><a href="#">Menu3</a></li> 
      <li><a href="#">Menu4</a></li> 
      <li><a href="#">Menu5</a></li> 
      <li><a href="#">Menu6</a></li> 
      <li><a href="#">Menu7</a></li> 
      <li><a href="#">Menu8</a></li> 
      <li><a href="#">Menu9</a></li> 
     </ul> <!-- END Navigation Bar--> 
    <div id="content"> 
    </div> 
</div> <!-- END page_wrap -->

CSS

ul#nav { 
    list-style: none; 
    width:980px; 
    height:35px; 
    background:#000000; 
} 
ul#nav li a { 
    float:left; 
    color:white; 
    text-decoration: none; 
    width:105px; 
    line-height: 35px; 
    border-right: 2px solid #979797; 
    text-align: center; 
} 
ul#nav li a:hover { 
    background: #979797; 
} 
#page_wrap { 
    margin:0 auto; 
    width:980px; 
}

Why there are empty spaces in the start and End 看到圖像，它有開始和結束的空白空間。爲什麼在開始和結束時有空的空間。如何避免這些事情。我相信這是造成比其父母更大的問題的原因。

如何刪除開始和結束空格以及如何將#nav正確放置在#page_wrap中，這意味着它不應該從#page_wrap出去。任何幫助？

Check this JSFIDDLE

來源

2013-10-08 sun

你只是沒有消除UL從瀏覽器樣式表中獲得的默認填充。 – CBroe

正確，設置'padding：0;'應該可以解決問題。 – Ruddy

哦，我明白了。瀏覽器有'ul'標籤的默認填充值......感謝信息 – sun

刪除默認填充爲UL。

ul#nav{padding:0;}

來源

2013-10-08 12:43:42 Dale

右邊的間距是從UL的寬度繼承的 – Dale

您可能只是編輯了您的答案。無需評論。 – Ruddy

因此，通過給Menu9分別設置ID並使用ID將邊框設置爲none將有所幫助。對？ @Dale – sun

喜歡這個

demo

CSS

*{ 
    margin:0; 
    padding:0; 
} 
ul#nav { 
    list-style: none; 
    width:980px; 
    height:35px; 
    background:#000000; 
    margin:0 auto; 
    padding:0; 

} 
ul#nav li a { 
    float:left; 
    color:white; 
    text-decoration: none; 
    width:105px; 
    line-height: 35px; 
    border-right: 2px solid #979797; 
    text-align: center; 
} 
ul#nav li a:hover { 
    background: #979797; 
} 

#page_wrap { 
    margin:0 auto; 
    width:980px; 
}

來源

2013-10-08 12:46:06 falguni

使用這個在你的CSS開始

* { 
padding: 0; 
}

來源

2013-10-08 12:46:24 vishalkin

導航欄的寬度比其父格

回答

相關問題