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

Susan Sarandon
Release: 2024-11-13 00:07:02
Original
721 people have browsed it

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;
}
Copy after login
<form method="post">
    <button>Search</button>
    <span><input type="text" title="Search" /></span>
</form>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template