1

Stackoverflow には、CSS (div) を使用して要素を水平方向に配置することについて尋ねる質問がいくつかあります。通常、これはフロートまたは を使用して実現されdisplay: inline-blockます。

ただし、非常に単純な要件があり、これらの手法のいずれかを使用して完全に機能させるのは困難です。テキスト行を DIV 要素に水平方向に揃えたいだけです。

したがって、基本的に、これを行うには3つの方法があります。

方法 1 (を使用display: inline-block)

<div style = "display: inline-block;">Foo</div>
<div style = "display: inline-block; padding-left: 19px">
    <div style = "border: 1px solid #000000; height: 1em; width: 100px"></div>
</div>

方法 2 (を使用float)

<div style = "width: 150px">
    <div style = "float:left">Foo</div>
    <div style = "float:right">
        <div style = "border: 1px solid #000000; height: 1em; width: 100px"></div>
    </div>
</div>

方法 3を使用.. (殺さないでください) a <table>:

<table style = "width: 150px" cellpadding = "0" cellspacing = "0" border = "0">
    <tr>
        <td style = "width: 40px">
            Foo
        </td>
        <td>
            <div style = "border: 1px solid #000000; height: 1em; width: 100px"></div>
        </td>
    </tr>
</table>

これら 3 つのメソッドは、Firefox では次のようにレンダリングされます。

ここに画像の説明を入力

まず、方法 1 ( inline-block) の問題点は、テキストが DIV 要素と垂直方向に整列 (中央揃え) されていないことです。これはぎこちなく見えます。代わりに、DIV の下の境界線がテキストの下部に揃えられます。これを修正するためにパディングとマージンを調整しようとしましたが、役に立ちませんでした。

方法 2 ( floats) は良さそうですが、方法 2 の問題は、テキストが何か長いものに変更された場合にどうなるかということです。良い...

ここに画像の説明を入力

したがって、フロートを使用する際の問題は、テキストが長くなると、DIV 要素が次の行にノックダウンされることです。したがって、これは受け入れられません。方法 1 ( inline-block) にはこの問題がないことに注意してください。

すべての要件を満たす唯一の方法は を使用する方法です<table>が、私はそれを使用したくありません。


それで、ここで最善の解決策は何ですか。を使用する方法 3 と同じ結果を得るために、CSS で DIV のみを使用するにはどうすればよい<table>ですか?

4

1 に答える 1

1

方法 1 の div を含むテキストに追加line-height:1em; vertical-align:top;すると、これが解決されるようです (ここで、line-height は境界のある div の高さです)。

私自身は、以前のバージョンの IE では予測がつかないため、このinline-block方法を好みます。次の行へのオーバーフローを防ぐのも難しいです。これは設計されているためです。floatfloatfloat

于 2012-07-15T21:25:19.607 に答える