1

この質問はインターネット上で頻繁に聞かれるようですが、まだ解決策が見つかりません。

インラインで表示されるこのナビゲーション バー (jQuery を使用してタブを切り替える) があります。これらの背景画像を表示していますが、それらをより明確にするために、それらをより広く、より高くする必要があります。

<div id="tabs">
<ul id="tabs-nav-cont">
    <li class="tabs-navs"><a href="#tabs-1">Nav 1</div></a></li>
    <li class="tabs-navs"><a href="#tabs-2">Nav 2</div></a></li>
    <li class="tabs-navs"><a href="#tabs-3">Nav 3</div></a></li>
    <li class="tabs-navs"><a href="#tabs-4">Nav 4</a></li>
</ul>
</div>

これを行う唯一の方法は、それらをブロック要素に戻すことです。それらは垂直に表示されるため、これは私が望むものではありません。そこで、サイズを大きくできるように、アンカーに div を入れてみました。ただし、それらもブロック要素に戻すようです。

よくわかりません。誰か助けてください:)

4

2 に答える 2

4

幸いなことに、あなたは 2009 年に住んでいます。そこでは、インライン ブロックがブラウザを通じて広く採用されています:クロス ブラウザ inline-block。

高さだけの場合 (およびlis のすべてのコンテンツがそれぞれ 1 行に収まる場合)、line-height: 123pxインライン ボックスの高さを 123px (つまり、1 行あたり) に設定する を使用します。

または、非常に一般的ですが、ナビゲーションが左揃えの場合は、フロートします。

#nav li {
  display: block;
  float: left;
}

乾杯、

于 2009-07-06T08:30:39.600 に答える
1

私が最初にこれを解決しなければならなかったのは2009年ではなかったので:)次のcssクラスでfirefoxの解決策を得ました：

.ib { display: -moz-inline-block; display: inline-block;}

これは、必要に応じて使用する一般的なインライン ブロック クラスです...

シナン。

于 2009-07-07T22:55:28.997 に答える