Style input element to fill remaining width of its container

div总长一定，button长度会变化，需要input填满剩下的长度。
http://stackoverflow.com/a/11815907/2177408
Here is a simple and clean solution without using JavaScript or table layout hacks. It is similar to this answer: Input
text auto width filling 100% with other elements floating

It is important to wrap the input field with a span which is

display:block

.
Next thing is that the button has to come first and the the input field second.

Then you can float the button to the right and the input field fills the remaining space.

HTML

<form method="post">
<button>Search</button>
<span><input type="text" title="Search" /></span>
</form>

CSS

form {
width: 500px;
overflow: hidden;
background-color: yellow;
}
input {
width: 100%;
}
span {
display: block;
overflow: hidden;
padding-right:10px;
}
button {
float: right;
}

A simple fiddle: http://jsfiddle.net/v7YTT/90/