文本输入和按钮输入在同一行

Question

我想创建一个在同一行包含文本输入和按钮输入的 div。

div的宽度将由我设置。这两个输入必须以按钮输入的宽度由其值设置的方式填充 div，而其余空间则由文本输入填充。

我想要这样的东西：

<div style="width: 300px; background-color: orange">
    <input type="text" />
    <input type="button" value="Save" />
</div>

对不起，我的英语不好。

Answer 1

演示： http: //jsfiddle.net/abhitalks/Y64ny/

您需要将文本包装input在另一个div中。应用于display:table容器div和包装display:table-cell器div。width:100%

HTML：

<div style="width: 300px; background-color: orange">
    <div class="t"> <!-- This is the wrapper div around the text input -->
        <input type="text" />
    </div>
    <input type="button" value="Save" />
</div>

CSS：

div { display: table; }
div.t {
    display: table-cell;
    width: 100%;
}
div.t > input {
    width: 100%;
}

更新：

正如 Op (@ChocapicSz) 在下面的评论中所述，添加box-sizing:border-box将修复填充。

更新的小提琴：http://jsfiddle.net/abhitalks/Y64ny/1/