Style input element to fill remaining width of its container

来源：互联网发布：彩八仙时时彩软件编辑：程序博客网时间：2024/05/16 04:52

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/

0 0