0

子の高さに折りたたまれる水平バー レイアウトが必要です。

次の例では、子の行の高さを >= 1.4em に特に設定しない限り、上部に不要な垂直スペースができることを除いて、ほとんどそこに到達します。

含まれているバーが完全に折りたたまれないのはなぜですか?

ここに画像の説明を入力

http://jsfiddle.net/ymnmT/を参照してください。

HTML:

<div class="hbar hbar1">
    <a>Some button</a><span>Some text</span>
</div>

<div class="hbar hbar2">
    <a>Some button</a><span>Some text</span>
</div>

CSS:

/*== layout ==*/

.hbar > * {
    display:inline-block;
    vertical-align: middle;
}

.hbar1 > * {
    line-height:1em;
}
.hbar2 > * {
    line-height:2em;
}

/*== styles ==*/

.hbar {background:#DDD;margin:10px;}
a {background-color:#FFF;}
span {background:red;}

（注意してください-インラインブロックを使用するソリューションを探しています）

4

2 に答える 2

2

のを子要素のよりも少なく設定するline-heightと、うまくいくはずです。問題は、div のデフォルトの行の高さが子要素の行の高さよりも大きいことです。.hbarline-height

于 2012-04-18T13:17:48.887 に答える
0

これは、div の子に対して display を inline-block に設定し、それらにも line-height を設定しているためです。それはあなたがそうするように言っていることを正確にやっています。何を達成しようとしていますか？

于 2012-04-18T13:14:31.627 に答える