0

我正在为库 OPAC 创建一个使用 HTML 和 CSS 的导航菜单。每个 li 项目中似乎都有不需要的顶部填充，这导致菜单中的项目之间存在持续的间隙。这在最新的 Firefox 和 IE 9 中都可见。

我的 HTML 是：

<div class="menu_div">
<ul>
<li id="mainnav">Find Information</li>
<li><a href="#">Catalogue</a></li>
<li><a href="#">Databases</a></li>
<li><a href="#">Guides</a></li?
</ul>
</div>

我的 CSS 内容如下：

.menu_div ul
{
padding:0px;
margin:0px;
padding-top: 0px;
margin-top: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFF;
list-style:none;
text-indent:10px;
color:#000000;
}

.menu_div ul li
{
padding:0px;
margin:0px;
padding-top: 0px;
margin-top: 0px;
list-style:none;
background:#CCC;
line-height:20px;
border-bottom:1px solid #333;
color:#000000;
}

.menu_div ul li a
{
padding:0px;
margin:0px;
padding-top: 0px;
margin-top: 0px;
text-decoration:none;
color:#FFF;
display:block;
color:#000000;
}

.menu_div ul li a:hover
{
background: #293895;
color:#FFFFFF;
}

.menu_div ul li#mainnav
{
background:#293895;
font-weight:bold;
color:#FFFFFF;
}

屏幕截图显示了我正在谈论的两个项目之间的“差距”（光标悬停在第二个项目上）：

http://postimage.org/image/5dxn7j56z/

任何帮助将不胜感激。

4

1 回答 1

2

这很可能是由设置的行高引起的，这通常是从列表周围的代码中继承的。尝试附加line-height: 1em;到每个元素的 CSS 以删除额外的间距。

编辑：如果您查看位于此处的 JSfiddle：http: //jsfiddle.net/pCAfk/没有间距，因为没有继承的行高。

于 2013-02-18T00:08:19.000 回答