证明表单元素水平填充div

Question

我有以下div：

<div>
    <label for="ctl00_cph_address">Address</label>
    <input name="ctl00$cph$address" type="text" id="ctl00_cph_address" class="required text">
    <a id="ctl00_cph_addCcContact">Add</a>
    <span id="ctl00_cph_addressrequiredValidator" style="display: none;"></span>
    <span id="ctl00_cph_addressValidator" style="display: none;"></span>
</div>

我希望标签固定宽度和右对齐，这通常很容易，但几乎不可能的是让addCcContact锚点右对齐到包含div的右侧。我已经通过绝对定位和浮动实现了这一点，但当然，有一种方法可以使用text-align来实现这一点。为什么这么难？

Answer 1

问题是，如果您在text-align上设置<a>，它会正确对齐<a>元素中的文本，但是{{ 1}}仍将只占用所需的空间，并在输入后立即流动。另一方面，如果您在包含<a>上设置text-align，那么<div>内的所有内容都会向右移动。

因此，你需要使用浮动或定位之类的东西，或者决定你想要占据干预空间的东西 - <div>，或不可见的元素，或<input>本身。然后你可以相应地调整元素的大小，例如， Flexbox的。

例如，要使<a>填充宽度的其余部分：

<input>

div {
  display:flex;
}
input {
  flex:1
}