與Chrome/IE和顯示奇怪的頂部填充：在ul列表內嵌

我有一個非常簡單的導航菜單使用水平使用display:inline;水平佈局的無序列表。我的HTML編輯器中的預覽顯示頁面合在一起很好。但是，在Chrome和IE瀏覽器中查看時，導航菜單頂部會出現一個奇怪的填充內容，並且只位於頂部。使用淘汰的過程，我知道這是我的CSS的<li>標籤的問題，但我不確定問題是什麼。與Chrome/IE和顯示奇怪的頂部填充：在ul列表內嵌

到目前爲止，我已嘗試display:inline-block，降低字體大小，將導航菜單中的<ul>標記設置爲display:inline以及其他許多事物。似乎沒有任何幫助。任何關於CSS出錯的建議？這是有問題的HTML ...

<body> 
    <div id="wrapper"> 
     <div id="header"></div> 
     <div id="navigation"> 
      <ul> 
       <li><a href="#">welcome</a></li> 
       <li><a href="#">who we are</a></li> 
       <li><a href="#">what we do</a></li> 
       <li><a href="#">contact</a></li> 
      </ul> 
     </div> 
     <div id="content">&nbsp;</div>  
    </div> 
</body>

這裏是CSS ...

body { 
    background-color: #000000; 
    margin: 0; 
    padding: 0; 
    font-family: Arial, Helvetica, Sans-Serif; 
    text-align: center; 
    } 

#header { 
    background-color: #ffffff; 
    height: 100px; 
} 

#wrapper { 
    width: 960px; 
    text-align: left; 
} 

#navigation { 
    height: 45px; 
    background-color: #C0C0C0; 
    font-size: 1.3em; 
    text-align: right; 
} 

#navigation a { 
    color: #00132a; 
    text-decoration: none; 
} 

#navigation a:hover { 
    color: #483D8B; 
} 

#navigation ul { 
    padding-top: 10px; 
} 

#navigation ul li { 
    display: inline; 
    list-style-type: none; 
    padding: 0 30px 0 30px; 
} 

#navigation-symbol { 
    font-size: 1em; 
} 

#content { 
    background-color: #ffffff; 
    text-align: left; 
    font-size: 14px; 
}

而對於互動樂趣有一個jsFiddle以及這說明我看到完全一樣的現象。感謝您的建議！

來源

2013-07-13 gfish3000

只需設置margin零

#navigation ul { 
    margin: 0; 
    padding-top: 10px; 
}

來源

2013-07-13 01:03:34 Chris78

D'哦！嘗試時，我把邊緣放在錯誤的CSS塊中。現在工作。 – gfish3000

隨時:)很高興幫助 – Chris78

與Chrome/IE和顯示奇怪的頂部填充：在ul列表內嵌

回答

相關問題