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 
}