我有一个非常简单的导航菜单,它使用水平布局的无序列表display:inline;
。我的 HTML 编辑器中的预览显示页面融合得很好。然而,当它在 Chrome 和 IE 中查看时,导航菜单顶部有一个奇怪的填充,并且仅在顶部。使用消除过程,我知道这是我的 CSS<li>
标记的问题,但我不确定问题是什么。
到目前为止,我已经尝试过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,它显示了我所看到的完全相同的现象。提前感谢您的建议!