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

Question

我想做一个连体输入(左对齐文本输入与右对齐按钮在同一行)。像这样:

但它希望具有灵活的宽度(组合输入应拉伸(stretch)至父容器宽度的 100%，可以是任何宽度。特别是，文本输入应拉伸(stretch)以使用行上的所有可用空间)。

我试过:

• 按钮 float:right with text input width:100% (溢出到 2 行)
• 文本输入宽度:calc(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;
}