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

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

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

問題：

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

解決方案：

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

選項1：浮動標籤和溢出

HTML:

<code class="html">&lt;label for=&quot;test&quot;&gt;Label&lt;/label&gt;
&lt;span&gt;&lt;input name=&quot;test&quot; id=&quot;test&quot; type=&quot;text&quot; /&gt;&lt;/span&gt;</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">&lt;div class=&quot;container&quot;&gt;
    &lt;label for=&quot;test&quot;&gt;Label&lt;/label&gt;
    &lt;span&gt;&lt;input name=&quot;test&quot; id=&quot;test&quot; type=&quot;text&quot; /&gt;&lt;/span&gt;
&lt;/div&gt;</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中文網其他相關文章！