【问题标题】：How to make a conjoined input with flexible width如何制作具有灵活宽度的联合输入
【发布时间】：2015-03-13 21:58:49
【问题描述】：

我想进行联合输入（左对齐文本输入与右对齐按钮在同一行）。像这样的：

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

我试过了：

按钮浮动：右，文本输入宽度：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。

如何进行宽度灵活的联合输入

【问题讨论】：

如果您的输入是 100% 的容器，您将如何将按钮放在同一行？不要使用浮点数，而是执行您尝试做的相反操作；使按钮设置宽度，然后只需输入 calc(100% - buttonWidth)，将它们都设置为显示内联块并收工。
@slime 当不同的浏览器使用稍微不同的宽度来呈现按钮文本时，如何使按钮设置宽度？
什么意思？如果您设置按钮宽度/字体大小...按钮在每个浏览器上看起来都完全相同。
@slime example - Ubuntu Firefox 的按钮宽度为 160px，Ubuntu Chrome 的按钮宽度为 123px。
如果你设置了你的例子没有做的宽度，它们的宽度会有什么不同？

标签： css

【解决方案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;
}

【讨论】：

是的，我忘记了input 元素是如何显示的……如果它是一个 div，它就会出现在……哈哈。检查我的编辑。