How to Fill the Remaining Container Width with an Input Element?

Filling Remaining Container Width with an Input Element

In certain web layouts, you may have a label and an input field on the same line within a container with a fixed width. The challenge arises when you want the input field to occupy the remaining width of the container without wrapping or having prior knowledge of the label's size.

Proposed Solution

To address this challenge, consider the following solution:

Wrap the input field with a span element and set its display property to "block." This ensures the input field behaves as a block-level element.

Place the input field after the button element.

Float the button to the right.

By following these steps, the input field will naturally fill the remaining space within the container without wrapping.

Example Code

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>

The above is the detailed content of How to Fill the Remaining Container Width with an Input Element?. For more information, please follow other related articles on the PHP Chinese website!