使用動態寬度水平對齊標籤和輸入
在網頁設計中,通常需要將標籤及其相應的輸入元素放置在同一位置線。但是,無論標籤文字為何,確保輸入元素填充剩餘寬度都具有挑戰性。
要使用CSS 實現此目的,請考慮以下技術:
溢出隱藏技術
<code class="html"><label for="test">Label</label> <span><input name="test" id="test" type="text" /></span></code>
<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>在跨度上使用溢位:隱藏屬性:
<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中文網其他相關文章!