Question

我正在尝试设计一个无表格的输入表单。我正在逐步完成它，因为我学习了关于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>

这会在文本框的左上角显示“标签”，在右上角显示“必需”。但是包含“必需”的范围是较小的字体，它似乎锚定在右上角，因此文本对齐高于“标签”文本的底部。如何使底部对齐？

Answer 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>

这也将使您无需清除所有内容。

Answer 2

您只需将margin-top:5添加到“必需”

即可

对齐浮动文本的底部

2 个答案: