HTML输入[type = text]占用线上剩余空间

Question

我试过并试图让它成功工作没有在IE7 +中使用表无济于事。

工作，但没有这么desireable代码：

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

这将完成的是有：地址[输入文本]查找 他们会全部在一行，并输入字段占用100％可用空间而不用推动标签或到下一行。

我不能为了我的生活得到这个没有表的工作。

输入，评论，链接表示赞赏！

Answer 1

看到这个this jsfiddle，这两个替代品在同一屏幕上。

Answer 2

参见：http://jsfiddle.net/thirtydot/PLsuG/

这是在IE7 +更大，所有现代浏览器中运行一个很好的解决方案。

这与@ Cyber​​Dude的第二个解决方案非常相似。

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 
}