如何將表單輸入標籤右對齊？

表單輸入標籤對齊

本文的目標是提供一種將表單標籤與其對應的右側對齊的解決方案

一個可能的解決方案包括使用width 屬性為標籤元素設定固定寬度，並使用display: inline-block 啟用內聯塊顯示。此外，使用 text-align: right 將文字向右對齊可確保標籤準確定位。

以下是示範此解決方案的程式碼片段：

<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中文網其他相關文章！