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

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

在 HTML 中，通常需要將標籤和輸入元素放置在同一水平線上。然而，確定輸入元素填充剩餘空間的理想寬度可能具有挑戰性。

問題：

標準方法，使用 width: auto;，結果輸入元素的靜態寬度。或者，寬度：100%；將輸入移至新行。

解決方案：

要實現所需的對齊方式，請考慮以下CSS 技術：

選項1：浮動標籤和溢出

HTML:

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

CSS:

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

此方法利用外溢來隱藏屬性透過防止溢出輸入元素與標籤對齊。

選項2：表格顯示

HTML:

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

CSS:

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

CSS:

CSS:CSS:CSS:此方法利用display: table 屬性來建立類似表格的佈局，其中標籤具有固定寬度，輸入元素會擴充以填滿剩餘空間。

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