Html 对齐浮动文本的底部

我正在尝试设计一个无表输入表单。我逐渐地通过它来学习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>

标签
要求的

---

这将在文本框的左上角显示“标签”，在右上角显示“必需”。但包含“Required”的跨距字体较小，并且似乎固定在右上角，因此文本的对齐位置高于“Label”文本的底部。如何使底部对齐？

您可以将

边距顶部：5

添加到“必需”中，有几种不同的方法，但我发现这是最有效的方法

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

标签
要求的

---

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

我认为这是style=“垂直对齐：基线”；您可能会这么想。但垂直对齐没有效果。我怀疑，因为我使用的是float，它考虑了标签和跨度块级别元素，所以垂直对齐不适用。伙计，我认为昨天有一个答案。不知道它在哪里。我会看看是否能找到它并复制到这里。如果你对固定数字没问题，你可以做边距顶部：5px或填充顶部：5px或线条高度：24px为了使用

垂直对齐属性

，包含的元素中必须有其他东西，比如图像，来指示顶部、中部或底部的组成。它笨重而且毫无用处。这里有一个较长的解释：由于可伸缩性，这是一个坏主意。对于放大字体的人（如视力受损者），在放大主文本时，顶部有5px的边距仍会使其浮动。作为记录，我也会避免使用

font-size:x-small

，而是使用可缩放单位，如

em

或

%

，我认为这是一个安全的解决方案，因为它都包含在一个div中，以帮助管理其维度。div的大小无关紧要。要符合ADA，您需要适应字体大小覆盖。所有浏览器都可以将所有字体设置为特定的系列或大小。如果您的div是硬大小，并且您设置为12px的字体被覆盖为18px，那么它将破坏您的布局。糟糕。现在，一般来说，您的整个布局应该设置为

%

或

em

，以适应不同的设备和用户需求/覆盖（包括div宽度、高度等），但至少您的字体应该设置为相互关联，而不是px大小，或者覆盖时它们都是相同的大小。