4

これはドロップダウンメニューの私のコードです。これを生成したチュートリアルからコードを引っ張ってきました: http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html

しかし、テキスト ナビゲーションの代わりに、スパン ID に関連付けられた CSS でわかるように画像があります。このコードでは、各スパンのドロップダウン メニューが正しく表示されますが、それらの間の空白を取り除くことはできません。

div/spans 間の HTML の新しい行が空白を作成することは知っていますが、CSS でそれらを取り除く方法を知りたいです。

<div id="menu">
<ul class="tabs">
<li class="hasmore"><a href="#"><span id="bird"></span></a>
    <ul class="dropdown">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li class="last"><a href="#">Menu item 6</a></li>
    </ul></li><li class="hasmore"><a href="#"><span id="wild"></span></a>
    <ul class="dropdown">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li class="last"><a href="#">Menu item 6</a></li>
    </ul>
</li>

</ul>
</div>

これは、適用される CSS の一部です。

#menu ul
{
margin: 0 auto;
}

ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}

ul.tabs a
{
position: relative;
display: block;
}

#bird {
background-image:url(images/birdingnav.png);
width:80px;
height: 20px;
text-indent:-9009px;
font-size: 0px;
border: 0;
}

#wild {
background-image:url(images/wildernessnav.png);
width:119px;
height: 20px;
text-indent:-9009px;
font-size:0px;
border: 0;
}

スパン画像の間に表示される空白を取り除くには、CSS のこのコードに何をする必要がありますか?

4

4 に答える 4

10

これは一般的な問題です。inline-blockよりも一般的ですinline。inline通常は、空白が関連するテキストの流れの中にあることを意味します。ではinline-block、人々はそれをレイアウトに使用しており、余白が問題になります。

white-space:collapse;特にこの問題に対処しようとする新しい CSS プロパティがありますがwhite-space-collapse: discard;、残念ながら主要なブラウザーのいずれでもまだサポートされていません。したがって、それはオプションではありません。

それがない場合、これに対する解決策は少しハックになる傾向があります。

一般的な解決策の 1 つは、コンテナー要素を に設定することfont-size:0;です。これにより、実質的に空白が無関係になります。まだそこにありますが、スペースを取りません。ここでの欠点は、内部要素の font-size を再度設定する必要があることです。ベースのフォントサイズで動的レイアウトを使用している場合em、これは扱いにくい場合があります。

レイアウトをレイアウトに切り替えるfloat:leftと、この問題は解消されますが、他の問題が発生します。個人的には float を使うのは好きではありませんでしたが、場合によってはそれが答えになるかもしれません。

Javascript を使用してスペースを削除することもできますが、それは実際にはハックです。

それ以外の場合は、HTML コードを再配置してスペースを削除することが、おそらく最善の解決策です。あなたが望んでいたものではないことはわかっています。

于 2012-06-27T22:27:11.360 に答える
1

display: inline-block画像要素を設定してみてください。スパンはインラインであると想定されているため、最善の解決策はスパンをまったく使用しないことですが、HTMLを変更しないと言ったので...

このフィドルの画像の間にスペースがないことを確認してください：http：//jsfiddle.net/rVTZc/

于 2012-06-27T22:13:14.853 に答える
0

このスタイルから:

#menu ul li a:hover span {
    background: url("images/topselectionright.png") repeat scroll right top transparent;
}

削除する

right top
于 2012-06-27T22:05:54.737 に答える
0

私があなたを正しく理解していれば、ul { font-size:0 }助けになるでしょうか？

于 2012-06-27T22:07:12.253 に答える