如何將表單標籤與輸入相鄰對齊？

將表單標籤與輸入相鄰對齊

在Web 開發領域，通常需要將表單標籤與對應的輸入欄位精確對齊，確保介面具有凝聚力和用戶友好性。然而，實現這個看似簡單的任務可能會帶來挑戰。

標籤對齊的一種方法是為標籤元素設定固定寬度，以確保其在所有表單輸入中的尺寸一致。這可以使用 CSS 屬性 width 來完成。此外，將 display 屬性設為 inline-block 以允許標籤在表單容器內水平流動。

為了進一步增強對齊功能，可以使用 text-align 屬性將標籤元素內的文字對齊到右邊的。這會將文字在固定寬度內水平居中，確保其完美位於輸入欄位旁。

以下是示範此方法的範例：

<code class="css">label {
  display: inline-block;
  width: 140px;
  text-align: right;
}</code>

<code class="html"><div class="block">
  <label>Simple label</label>
  <input type="text">
</div>
<div class="block">
  <label>Label with more text</label>
  <input type="text">
</div>
<div class="block">
  <label>Short</label>
  <input type="text">
</div></code>

透過實現此方法透過技術，表單標籤可以與輸入欄位精確對齊，從而提供無縫且具有視覺吸引力的使用者體驗。

以上是如何將表單標籤與輸入相鄰對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！