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

Question

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

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

我想要这样的东西：

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

对不起，我的英语不好。

原文由 Szabolcs Antal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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/

原文由 Abhitalks 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

http://jsfiddle.net/8FC2t/

     <div>
    <input type="text"  class='save'/>
    <input type="button" value="Save" />
</div>
<br>
<div>
    <input type="text" class='dns' />
    <input type="button" value="Do not Save" />
</div>

div{
    width:200px;
    background-color:orange;

}
.dns{
    width:calc(100% - 105px)
}
.save{
    width:calc(100% - 65px)
}
div>input[type='button']{
  float:right;
}

原文由 Vikram Jakkampudi 发布，翻译遵循 CC BY-SA 3.0 许可协议