如何使灵活宽度的连接输入

Question

我想创建一个连接输入（左对齐文本输入与右对齐按钮在同一行上）。像这样：

但是它希望具有灵活的宽度（组合输入应该延伸到父容器宽度的100％，可以是任何宽度。特别是，文本输入应该拉伸以使用线上的所有可用空间。）< / p>

我试过了：

• 按钮float：右边有文字输入宽度：100％（这会溢出到2行）
• 文字输入宽度：计算（100％ - 90px）（几乎可以，但每个浏览器的按钮宽度不同）

JSFiddle 的代码示例：

HTML：

<div class="conjoined-input">
 <input type="button" value="Update">
 <input type="text">
</div>

CSS：

.conjoined-input {
    width: 500px;
    border: 1px solid red;
}

.conjoined-input input[type="text"] {
    /*width: 100%;*/
}

.conjoined-input input[type="button"] {
    float: right;
}

我只需要现代浏览器支持（IE9 +），并且可以使用任何HTML和CSS。

如何制作宽度灵活的连体输入

Answer 1

使用flex很容易：

DEMO

.conjoined-input {
    width: 500px;
    border: 1px solid red;
    display: flex;
}

.conjoined-input input[type="text"] {
    width: 100%;
}

IE9很开心吗？

DEMO2

所以，将输入包装在div中。

 <button>Search</button>
 <span><input type="text" title="Search" /></span>

然后应用魔术风格

.conjoined-input {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
    border: 1px solid red;
}
.conjoined-input input[type="text"]{
    width: 100%
}
.conjoined-input span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
.conjoined-input button{
    float: right;
}