實現表單標籤與輸入在同一行水平放置

在網頁開發中，表單的美觀對於使用者體驗至關重要。將標籤和輸入欄位排列在同一行可以增強表單的可讀性和可用性。本文探討如何將輸入元素與其標籤無縫對齊，無論其長度為何。

初始嘗試

在單一元素上對齊標籤和輸入的常見方法行涉及將輸入的寬度設為自動。然而，這通常會導致輸入寬度固定。或者，使用寬度：100%；將輸入移至換行符，從而建立不需要的佈局。

解決方案：使用帶有隱藏溢出的Span 元素

此解決方案涉及將輸入元素包裝在一個跨度內，給出它有足夠的填充來保持其在標籤下方的位置。隨後，將標籤調整為左浮動會將其移動到跨距的左側。將跨度的溢出設為隱藏可確保其內容適合，無論其長度如何，從而創建所需的對齊方式。

使用顯示的最佳放置：table-cell

Another方法利用 display: table-cell 將標籤和輸入定位為表格單元格。這要求容器顯示為表格，並確定標籤的寬度以保持其位置，同時調整輸入填充以優化間距。

實作指南

對於第一個解決方案，使用以下HTML 程式碼：

Label

和 CSS:

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

第二種解：

HTML:

    Label
    

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%
}

透過遵循這些解決方案，開發人員可以實現標籤和輸入元素所需的水平對齊，從而增強表單設計和使用者體驗。