0

表のない入力フォームを設計しようとしています。CSSについて新しいことを学ぶことで、徐々に道を進んでいます。しかし、小さい検証テキストをフィールドのラベル テキストの下部に揃える方法がわかりません。

<div style="width:275px">
    <div style="width:175px">
        <label style="float:left;">Label</label>
        <span style="float:right; font-size:x-small; color:#FF0000;">Required</span>
        <input type="text" style="display:block; clear:both; width:100%" />
    </div>
</div>

これにより、テキストボックスの左上に「ラベル」が表示され、右上に「必須」が表示されます。ただし、「必須」を含むスパンはフォントが小さく、右上隅に固定されているように見えるため、テキストは「ラベル」テキストの下部よりも高く配置されます。ボトムスを揃えるにはどうすればいいですか？

4

2 に答える 2

1

いくつかの異なる方法がありますが、私はこれが最も効率的であることがわかりました

<div style="width:275px">
    <div style="width:175px">
        <div style="position:relative; height: 2em;">
            <label style="position:absolute; left: 0; bottom: 0;">Label</label>
            <span style="position:absolute; right: 0; bottom: 0; font-size:x-small; color:#FF0000;">Required</span>
        </div>
        <input type="text" style="display:block; clear:both; width:100%" />
    </div>
</div>

これにより、すべてをクリアする必要もなくなります。

于 2013-02-22T19:32:50.883 に答える
0

margin-top:5「必須」に追加するだけです

于 2013-02-22T19:19:25.307 に答える