如何將輸入元素與標籤對齊在同一行？

將輸入元素與標籤在同一行上對齊

在網頁設計中，通常需要將標籤及其對應的輸入欄位放置在同一條線，輸入欄位擴展以填充其容器的剩餘寬度。然而，這帶來了挑戰，因為 CSS 屬性如「width: 100%;」通常會導致輸入換行。

要解決此問題，有兩種方法：

方法1：溢位隱藏和浮動

這種方法涉及將標籤浮動到左側，並將輸入設定為隱藏溢出和環繞它的跨度。跨距的左側填入零，右側填入 6 像素，以考慮標籤的寬度。

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

<code class="css">label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}</code>

方法 2：顯示表格單元格

另一個選項是使用「display: table-cell」屬性。容器設定為“display: table”，這會建立類似表格的佈局，而標籤和輸入則放置在表格儲存格內。標籤的寬度為 1px 以防止換行，輸入的左內邊距設定為 5px 以實現間距。

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

<code class="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%
}</code>

兩種方法都有效實現了跨瀏覽器所需的對齊方式相容性。開發人員可以選擇最適合其特定需求和專案要求的方法。

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