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 回答