如何用輸入元素填滿容器的剩餘寬度？

用輸入元素填滿剩餘容器寬度

當輸入標籤和文字欄位在固定寬度容器內共用一行時，樣式以最佳方式填入剩餘寬度的輸入欄位可能是一個挑戰。這是一個多功能解決方案，無需依賴不可靠的JavaScript 或表格佈局技巧：

解決方案：

1. 包裹輸入欄位： 括起帶有顯示的跨度中的輸入欄位：區塊。
2. 翻轉定位： 將按鈕元素放置在輸入欄位之前。
3. 浮動按鈕： 將 float: 加入按鈕元素的右側。
4. 填入剩餘部分space:輸入字段，包裹在span中，會自動佔據剩餘的空間space.

範例：

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

<form method="post">
    <button>Search</button>
    <span><input type="text" title="Search" /></span>
</form>

此方法可確保即使不知道標籤大小，輸入欄位也能填入剩餘的容器寬度。它簡單、乾淨，並且與各種瀏覽器相容。

以上是如何用輸入元素填滿容器的剩餘寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！