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

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

在某些網頁佈局中，您可能在同一行上有一個標籤和一個輸入字段在具有固定寬度的容器內。當您希望輸入欄位佔據容器的剩餘寬度而不進行包裝或事先不知道標籤的大小時，就會出現挑戰。

建議的解決方案

要解決對於這個挑戰，請考慮以下解決方案：

用span 元素包裹輸入字段並將其顯示屬性設定為“block”。這可確保輸入欄位表現為區塊級元素。

將輸入欄位放在按鈕元素後面。

將按鈕浮到右側。

依照以下步驟操作步驟後，輸入欄位將自然填滿容器內的剩餘空間，而不進行換行。

範例程式碼

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中文網其他相關文章！