如何在右侧有一个按钮，在左侧有两个输入来填充该行？答案

【问题标题】：How to have one button on right and two inputs on left to fill the line?如何在右侧有一个按钮，在左侧有两个输入来填充该行？
【发布时间】：2014-12-08 13:35:46
【问题描述】：

我找到了几个类似的帖子，但没有解决这个问题。我正在尝试这样做：

| +---------------------+ +---------------------+ +------------------------------+ |
| |        Input        | |        Input        | |             Button           | |
| | 50% remaining width | | 50% remaining width | | fixed width based on content | |
| +---------------------+ +---------------------+ +------------------------------+ |

两个输入框和一个按钮在同一行（屏幕宽度，不固定）
按钮浮动在右侧（大小取决于内容，不固定）
两个输入字段浮动在左侧（各占一行的 50%）
当屏幕宽度小于定义的最小值时，这 3 个元素各占一行

我尝试了几个代码，但找不到有效且响应迅速的解决方案。这是我提出的更好（但仍然不正确）的解决方案：

<html>
<head>
    <style type="text/css" media="screen">

.container {width: 100%; display:table;}
.left-side{display:table-cell; vertical-align:middle}
.left-side .fields {width: 100%;}
.form-control {width: 49%}
.right-side {float:right}

</style>
</head>
<body>

<div class="container">
    <div class="left-side">
        <div class="fields">
            <input type="text" class="form-control" />
            <input type="text" class="form-control" />
        </div>
    </div>
        <div class="right-side">
            <button type="submit" class="">Search</button>
        </div>
</div>

</body>
</html>

也许有更好的方法来做到这一点。你可以帮帮我吗？谢谢！

【问题讨论】：

这太宽泛了...它不仅涉及展示位置（顺便说一句，这并不难），还涉及媒体查询以使其响应...通过显示一些缩小您的问题你的努力。事实上，它更像是一个为我编写代码的问题......
“我尝试了几个代码”。请张贴，以便我们查看您拥有什么以及您尝试了什么。
我修改了第一个帖子（对不起，我是新来的）。

标签： html css input css-float width

【解决方案1】：

即使这是一个很老的话题，我也试图提出一个解决方案。输入的左侧最大化（100% 宽度）table-cell，右侧table-cell 未定义长度。两个表格单元格的内容都带有nowrap。

在这里检查小提琴：http://jsfiddle.net/jpavel76/hL5ggv4L/

【讨论】：