Question

我已经尝试过并尝试使用在没有的情况下使用IE7 +中的表格无效。

工作但不那么令人满意的代码：

<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％的可用空间，而无需将标签或a推到下一行。

我不能为我的生活让这个没有桌子工作。

输入，评论，链接赞赏！

Answer 1

在同一屏幕上看到这两个选项this jsfiddle。

Answer 2

请参阅： http://jsfiddle.net/thirtydot/PLsuG/

这是一个很好的解决方案，适用于IE7 +更高版本和所有现代浏览器。

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

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

HTML输入[type = text]占用该行的剩余空间

2 个答案: