0

インライン ブロック (「IB」と呼びます) の下部を、親要素 (「PE」と呼びます) のテキストの下部 (「g」のようなディセンダーを除く) に揃えるにはどうすればよいですか? これは、テキストのサイズに関係なく一般化する方法である必要があります-サイズ固有のピクセル値をハードコーディングしたくありません。

以下は、私が使用する HTML の例と、CSS が必要なクラスです。

<div class="pe">
    Parent text line
    <span class="ib" style="display: inline-block;">
        - and child text line
    </span>
</div>

そして、これが私が望むものです：

http://imgur.com/S1l7Y

4

3 に答える 3

1

以下のcssをibに追加できます。下マージンを変更して配置を制御します。

.ib{
     display: inline-block;
     font-size: 10px; 
     vertical-align: bottom;
     margin:0 0 1px 0;
}​

@ Rorok_89私はもう1行のcssを追加していることを知っていますが、別の方法でそれを行う方法です。あなたの答えは完璧です。

于 2012-06-14T10:56:30.477 に答える
1

OPは次のよ​​うに更新しました：「ありがとう、しかし、サイズ固有のピクセル値をハードコーディングしたくないことを明確にするために質問を編集しました。」

その場合、さまざまなテキスト サイズのさまざまな行を自動的に修正するソリューションはありません。Chrome/Opera は Firefox/IE とは異なる方法で不正確な値を丸めるため、私が提供した他のソリューションは、フォント サイズのいくつかの組み合わせを持つすべてのブラウザーで完全でさえありません。特定のCSS。ユニバーサル ソリューションに似た唯一の方法は、vertical-align: middle; を設定することです。しかし、私はそれが一貫して機能するとは信じていません。

于 2012-06-15T11:41:25.043 に答える
0

これは私にとってはうまくいったようです：http：//jsfiddle.net/Rorok_89/Z8TWH/

.ib{
 display: inline-block;
 font-size: 10px; 
 vertical-align: 1px;
}
于 2012-06-14T10:41:03.307 に答える