0

私には非常に一般的であるに違いないシナリオがありますが、私はまだ理想的な解決策を思い付いていません。

私は次の構造を持っています-これは、htmlがどのようにレイアウトされているかではなく、どのように表示されるかです。

<div>
    <label></label> <input></input>
    <span>this is where the validation goes</span>
</div>

私が抱えている問題はラベルにあります。ラベルは2行に折り返すのに十分な長さである場合があります。1行でも2行でも、入力要素の中央に配置できるようにしたい。

この問題への最善のアプローチに関するアイデアはありますか？

4

1 に答える 1

1

私は1つの解決策を考えることができますが、それがあなたが望むかどうかはわかりません。説明し、例を示します。

最初にあなたの包含を作り、<div> position:relative次に<input> position: absolute。次に、topプロパティを50％に設定する必要があります。

そして、私たちが正確に真ん中になりたくないのであれば、私たちは<input>ある程度の高さを与えなければならず、そして最後に彼に与えなければなりませんmargin-top: -(height/2)。

div { position:relative; }
label { width: 200px; display: inline-block;  }
input { width: 200px; height: 20px; position: absolute; top: 50%; margin-top: -10px;}

その後、スパンを構成します。

于 2013-01-09T16:12:34.397 に答える