我有一个非常简单的导航菜单，使用水平排列的无序列表 display:inline; .我的 HTML 编辑器中的预览显示页面组合得很好。然而，当它在 Chrome 和 IE 中查看时，导航菜单顶部有一个奇怪的填充，而且只在顶部。使用消除过程，我知道这是我的 <li> 的 CSS 的问题。标记，但我不确定问题出在哪里。
到目前为止，我已经尝试了 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"> </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这也显示了我所看到的完全相同的现象。提前感谢您的建议!
最佳答案
只需将 margin 设置为零
#navigation ul {
margin: 0;
padding-top: 10px;
}
关于html - 使用 Chrome/IE 进行奇怪的顶部填充并显示 :inline on ul list，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17625982/