幅のあるインライン要素

Question

この質問は、インターネットを介してfreqeuentlyされているようだが、私はまだ解決策を見つけることができません。

私はインラインで表示されるこのナビゲーションバーを持っています（これは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を入れて、サイズを調整できるようにしました。しかし、彼らは要素をブロックするためにそれらを戻すように見える。

私は混乱しています。誰か助けてください:)

Answer 1

幸いなことに、あなたはインラインブロックが広く受け入れられている2009年に住んでいます：Cross browser inline-block。

liのすべてのコンテンツが1行に収まる場合は、line-height: 123pxとします。これは、インラインボックスの高さを123px（1行につき、 ）です。

それとも、かなり一般的に、ナビゲーションが左揃えされている場合、それらをフロート：

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

乾杯、

Answer 2

を、それは私が最初にこの:)私が得たを解決するために持っていた2009年ではなかったので次のCSSクラスを持つFirefoxのためのソリューション：

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

これは私が必要な使用私の一般的なインラインブロッククラスです...

シナナン。