如何將表單標籤和輸入水平對齊在同一行？

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

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

初始嘗試

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

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

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

使用顯示的最佳放置：表格單元格

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

實作指南

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

<label for="test">Label</label>
<span><input name="test" id="test" type="text"></span>

和CSS：

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

和CSS：

和CSS：

<div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text"></span>
</div>

對於第二個解決方案：

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

HTML：

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

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