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:
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!