如何對齊輸入標簽以使其垂直對齊？

Question

我正在創建表單並喜歡它的外觀，但是我無法終生想出一種更好的方式來顯示它。

我要尋找的是所有標簽垂直對齊的地方。 我已經在CodePen上發布了一些代碼： 鏈接

但是這是我所做的工作的簡要概述：

HTML

<table>
<tr>
    <td><label for="f-name">Given Name: </label></td>
    <td><input type="text" id="f-name"></td>
</tr>
<tr>
    <td><label for="l-name">Family Name: </label></td>
    <td><input type="text" id="l-name"></td>
</tr>
<tr>
    <td><label for="address">Address: </label></td>
    <td><input type="text" id="address"></td>
</tr>
<tr>
    <td><label for="city">City: </label></td>
    <td><input type="text" id="city"></td>
</tr>

上海社會科學院

table
  margin: 0 auto
    td:first-child
      text-align: right

如果有人知道實現此效果的簡單方法，那就太好了。

Answer 1

表格是唯一可以通過這種方式可靠地為您提供多行水平對齊的元素。 但是，如您所正確識別的那樣，表不應用於布局目的。 因此，您必須找到另一種解決方案以對齊所有元素。 有兩種合適的解決方案：

• 將所有元素向右浮動，使所有輸入字段具有相同的寬度
• 內聯顯示兩個元素，並給所有標簽相同的寬度

我將選擇第二個選項，因為我不太喜歡浮動元素，因為如果不按照您想要的方式（無論使用哪種奇怪的瀏覽器顯示）顯示它們，它們將看起來更不完整。 相比之下，具有固定寬度的內聯元素相對安全，因為在最壞的情況下，您的元素只會彼此位於下方，並且查看者甚至可能不會注意到它不是預期的布局。

 label, input { display: inline-block; width: 200px; } label { text-align: right; } 

 <div> <label for="f-name">Given Name:</label> <input type="text" id="f-name" /> </div> <div> <label for="l-name">Family Name:</label> <input type="text" id="l-name" /> </div> <div> <label for="address">Address:</label> <input type="text" id="address" /> </div> <div> <label for="city">City:</label> <input type="text" id="city" /> </div> 

一個可能的問題是，您需要猜測標簽的寬度並將這些猜測放入CSS中，因此基於浮動的解決方案在此得到了榮譽獎（由於標簽不需要固定的寬度，因此它的處理效果更好） -但是在實踐中，通常很容易找到全局適用的最大寬度，因為標簽應保持簡潔，很少是完整的句子。

---

也可以使用flexbox屬性解決此問題。 它具有絕對自動寬度分配的優點，但是較舊的瀏覽器不一定支持它（作為參考，請在caniuse.com上查看此圖 ），因此除非您絕對需要這種功能，否則我建議您使用上述方法。

 .flex-container { background-color: #ddd; display: flex; margin: 0 auto; max-width: 500px; } label, input { display: block; } label { flex: 1; line-height: 1.5em; margin-right: 0.5em; text-align: right; } input { display: block; width: 200px; } 

 <div class="flex-container"> <label for="f-name">Given Name:</label> <input type="text" id="f-name" /> </div> <div class="flex-container"> <label for="l-name">Family Name:</label> <input type="text" id="l-name" /> </div> <div class="flex-container"> <label for="address">Address:</label> <input type="text" id="address" /> </div> <div class="flex-container"> <label for="city">City:</label> <input type="text" id="city" /> </div> 

Answer 2

您可以輕松地在沒有表的情況下執行此操作：

 body { font-family: "Roboto", sans-serif; margin: 0; } fieldset { border: none; } .question { margin: 0 auto; float: left; clear: left; width: 500px; height: 30px; } .question label { text-align: right; width: 250px; display: inline-block; line-height: 30px; } 

 <fieldset> <div class="question"> <label for="f-name">Given Name:</label> <input type="text" id="f-name"> </div> <div class="question"> <label for="l-name">Family Name:</label> <input type="text" id="l-name"> </div> <div class="question"> <label for="address">Address:</label> <input type="text" id="address"> </div> <div class="question"> <label for="city">City:</label> <input type="text" id="city"> </div> </fieldset> 

這里的大多數樣式都是任意的。 關鍵是問題div的高度和標簽行高匹配，以便標簽居中對齊