如何在 Web 表單中水平對齊標籤和輸入欄位？

水平對齊標籤和輸入元素

增強 Web 表單的美觀性需要能夠將標籤和輸入欄位並排放置。本指南說明如何使用 CSS 來實現這種水平對齊。

問題：

正如第一篇文章中強調的，有兩個主要挑戰：

• 確保標籤和輸入元素佔據同一行。
• 將輸入欄位的寬度擴展到無論標籤的長度如何，都填滿剩餘空間。

解決方案 1：Inline-Block

對標籤和輸入元素使用 display: inline-block允許它們水平對齊，同時保持各自的尺寸。但是，這可能無法滿足填充輸入欄位剩餘寬度的要求。

改進的解決方案：float/overflow Magic

• 建立一個容器標籤和輸入元素。
• 將標籤向左浮動，讓輸入佔據剩餘的空間空格。
• 隱藏標籤容器上的溢位以防止雙行行為。
• 為輸入元素設定寬度：100%。

**CSS：

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

解決方案2： table-cell

另一個有效的方法是將這兩個元素都視為表格單元。

• 建立一個包裝容器並將其顯示屬性設定為表格。
• 將標籤指定為顯示：表格單元格，寬度：1px和空白：nowrap以防止溢出。
• 設定輸入欄位顯示為：表格儲存格，寬度：100%。

**CSS:

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}

以上是如何在 Web 表單中水平對齊標籤和輸入欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！