与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列表内嵌

回答

相关问题