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 に答える