如何在 CSS 中使用動態寬度水平對齊標籤和輸入？

使用動態寬度水平對齊標籤和輸入

在網頁設計中，通常需要將標籤及其相應的輸入元素放置在同一位置線。但是，無論標籤文字為何，確保輸入元素填充剩餘寬度都具有挑戰性。

要使用CSS 實現此目的，請考慮以下技術：

溢出隱藏技術

1. HTML:使用label 和span 元素來包裝輸入：

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

2. CSS： 在跨度上使用溢位：隱藏屬性：

<code class="css">label {
    float: left; /* Align label to the left */
}
span {
    display: block;
    overflow: hidden; /* Key trick for adjusting input width */
    padding: 0 4px 0 6px; /* Add padding for visual consistency */
}
input {
    width: 100%;
}</code>

在跨度上使用溢位：隱藏屬性：

表格單元格顯示技術

HTML：

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

將標籤和輸入包含在容器div 中：

<code class="css">.container {
    display: table;
    width: 100%;
}
label {
    display: table-cell;
    width: 1px; /* Minimal width to accommodate label */
    white-space: nowrap;
}
span {
    display: table-cell;
    padding: 0 0 0 5px;
}
input {
    width: 100%;
}</code>

CSS：

利用表格顯示和表格單元格屬性：

這些技術有效地水平對齊標籤和輸入，同時確保輸入元素填充剩餘寬度，適應標籤文字的長度。

以上是如何在 CSS 中使用動態寬度水平對齊標籤和輸入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！