將輸入元素與標籤在同一行上對齊
在網頁設計中，通常需要將標籤及其對應的輸入欄位放置在同一條線，輸入欄位擴展以填充其容器的剩餘寬度。然而，這帶來了挑戰，因為 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中文網其他相關文章！
