如何將表單中的輸入旁邊的標籤對齊？

對齊表單中的標籤

在表單設計中，對齊輸入旁的標籤可以增強使用者的可讀性和互動性。以下是實現這種對齊的步驟：

1.確定固定標籤寬度：

考慮最長的標籤文本，計算所有標籤元素的適當​​固定寬度。使用 CSS 的 width 屬性來設定此寬度。

2.內嵌區塊顯示：

將 display: inline-block 指派給標籤元素。這允許它們水平對齊，同時保持其定義的寬度。

3.文字右對齊：

透過為標籤設定 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中文網其他相關文章！