HTML input[type=text] take up remainder of space on the line
I've tried and tried to get this to successfully work without using tables in IE7+ to no avail.
The working but not so desireable code:
<table>
<tr>
<td><label for="address">Address</label></td>
<td>开发者_运维问答;<input type="text" name="address" value="" id="address" style="width: 100%;"/></td>
<td><a href="#">Find</a></td>
</tr>
</table>
What this will do is have: Address [ INPUT TEXT ] Find They'll be all on one line and the input field take up 100% of available space without pushing the label or a to the next line.
I cannot for the life of me get this to work without tables.
Input, comments, links appreciated!
See this this jsfiddle, both alternatives on the same screen.
See: http://jsfiddle.net/thirtydot/PLsuG/
This is a good solution that work in IE7 + greater and all modern browsers.
It's very similar to @CyberDude's second solution.
HTML:
<div class="formLine">
<label for="address">Address</label>
<a href="#">Find</a>
<span><input type="text" name="address" id="address" value="" /></span>
</div>
CSS:
.formLine {
overflow: hidden;
background: #ccc
}
.formLine input {
width: 100%
}
.formLine label {
float: left
}
.formLine span {
display: block;
overflow: hidden;
padding: 0 5px
}
.formLine a {
float: right
}
.formLine input, .formLine a {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
精彩评论