对齐表单元素以水平填充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

问题是，如果在<a>上设置text-align ，它将正确地将<a>元素内的文本右对齐，但是<a>仍仅占用所需的空间，并且会立即流动输入后。 在另一方面，如果你设置text-align的含<div>那么一切都将里面<div>会推到右侧。

因此，您需要使用诸如浮动或定位之类的东西，或者确定要占据中间空间的内容- <input>或不可见元素，或<a>本身。 然后，您可以使用例如flexbox相应地调整元素的大小。

例如，要使<input>填充其余宽度：

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

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