對齊表單元素以水平填充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>