護短表單元素，以填補一個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>元素內的文本，但<a>仍然只會佔用所需的空間，它會之後立即流輸入。另一方面，如果您在包含<div>上設置了text-align，那麼<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>