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

Filling Remaining Container Width with an Input Element

When input labels and text fields share a single line within a fixed-width container, styling the input field to optimally fill the remaining width can be a challenge. Here's a versatile solution without relying on unreliable JavaScript or table layout tricks:

Solution:

1. Wrap the input field: Enclose the input field in a span with display: block.
2. Flip positioning: Place the button element before the input field.
3. Float the button: Add float: right to the button element.
4. Fill remaining space: The input field, wrapped in the span, will automatically occupy the remaining space.

Example:

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>

This approach ensures that the input field fills the remaining container width even without knowing the label size. It's simple, clean, and compatible with various browsers.

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