對齊一組標籤的右側

Question

我正在製作一個HTML頁面，其中包含用於填寫結算信息的字段列表。 由於標籤是串聯的，它們的寬度由包含在其中的文本決定，因此使它們具有不同的寬度，這使輸入框不對齊。這使得一個非常醜陋，無組織的外觀。

<fieldset> 
 
    <legend>Billing Information</legend><br> 
 
    Card Number: <input type="text"><br><br> 
 
    Expiration Month: <input type="number"><br><br> 
 
    Expiration Year: <input type="number"><br><br> 
 
    Name on Card: <input type="text"><br><br> 
 
    Address: <input type="text"><br><br> 
 
    City: <input type="text"><br><br> 
 
    State: <input type="text"><br><br> 
 
    Country: <input type="text"><br><br> 
 
    ZIP Code: <input type="number"><br><br> 
 
</fieldset><br>

什麼我需要做的，我的HTML代碼對準標籤和輸入框的左邊的右邊？

Answer 1

使用表結構爲您正確對齊字段列表。

<fieldset> 
 
     <legend>Billing Information</legend> 
 
     <table> 
 
      <tr><td>Card Number:</td><td><input type="text"></td></tr> 
 
      <tr><td>Expiration Month:</td><td> <input type="number"></td></tr> 
 
      <tr><td>Expiration Year:</td><td> <input type="number"></td></tr> 
 
      <tr><td>Name on Card:</td><td> <input type="text"></td></tr> 
 
      <tr><td>Address:</td><td> <input type="text"></td></tr> 
 
      <tr><td>City:</td><td> <input type="text"></td></tr> 
 
      <tr><td>State:</td><td> <input type="text"></td></tr> 
 
      <tr><td>Country:</td><td> <input type="text"></td></tr> 
 
      <tr><td>ZIP Code:</td><td> <input type="number"></td></tr> 
 
     </table> 
 
    </fieldset>

Answer 2

您可以使用表或使用display: table-row & display: table-cell CSS模擬表格的單元佈局如下：

fieldset {display: inline-block; padding: 10px 20px;} /* 'display: inline-block' is not necessary, just for appearance */ 
 

 
.row {display: table-row; } 
 
.lbl {display: table-cell; text-align:right; padding: 8px 5px;}

<fieldset> 
 
    <legend>Billing Information</legend> 
 
    
 
    <div class="row"><span class="lbl">Card Number: </span><input type="text"></div> 
 
    <div class="row"><span class="lbl">Expiration Month: </span><input type="number"></div> 
 
    <div class="row"><span class="lbl">Expiration Year: </span><input type="number"></div> 
 
    <!-- ... /--> 
 
</fieldset><br>

Answer 3

你會發現，如果你把你的元素更容易進入合適的容器，並使用CSS來完成複雜的工作。

<style type="text/css"> 
    label { 
     display: inline-block; 
     font-weight: bold; 
     width: 10em; 
    } 
</style> 
<fieldset> 
    <legend>Billing Information</legend><br> 
     <p><label for="card-number">Card Number:</label><input type="text" name="card-number" id="card-number"></p> 
     <p><label for="expiration-month">Expiration Month:</label><input type="text" name="expiration-month" id="expiration-month"></p> 
     <!-- etc --> 
</fieldset> 

這裏label做3個項目：

• 它創建了一個可點擊的文本來激活您的輸入框。
• 它使屏幕閱讀器和其他軟件的文本清晰。
• 您可以輕鬆地將CSS應用到元素。

的label元件可以輸入元件周圍纏繞：

<label>Expiration Month: <input …></label> 

或與for屬性附接。 for屬性引用id，這是獨立的name屬性。正如您在示例中看到的那樣，它們通常設置爲相同的值。

在CSS中，我們將寬度設置爲合理的。但是，需要將label顯示爲inline-block以使寬度生效。

Answer 4

使用flexbox來解決您的問題。 使用display: flex包裝容器fieldset，將flex-direction設置爲column。將孩子裹在div內，並將span元素的flex-grow屬性設置爲1。

使用flexbox會照顧到響應能力。

參考CSS Flexbox

fieldset { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
div { 
 
    display: flex; 
 
    margin: 10px; 
 
} 
 

 
span { 
 
    flex: 1; 
 
}

<fieldset> 
 
    <legend>Billing Information</legend> 
 
    <div><span>Card Number: </span><input type="text"> </div> 
 
    <div><span>Expiration Month:</span> <input type="number"></div> 
 
    <div><span> Expiration Year:</span> <input type="number"></div> 
 
    <div><span>Name on Card:</span> <input type="text"> </div> 
 
    <div><span>Address:</span> <input type="text"> </div> 
 
    <div><span>City:</span> <input type="text"></div> 
 
    <div><span>State: </span><input type="text"></div> 
 
    <div><span>Country:</span> <input type="text"></div> 
 
    <div><span>ZIP Code:</span> <input type="number"></div> 
 
</fieldset>