我找到了几个类似的帖子，但没有解决这个问题。我正在尝试这样做:
| +---------------------+ +---------------------+ +------------------------------+ |
| | Input | | Input | | Button | |
| | 50% remaining width | | 50% remaining width | | fixed width based on content | |
| +---------------------+ +---------------------+ +------------------------------+ |
- 两个输入框和一个按钮在同一行(屏幕宽度，不固定)
- 按钮向右浮动(大小取决于内容，不固定)
- 两个输入字段 float 在左侧(各填充该行的其余部分 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>
也许有更好的方法来做到这一点。你可以帮帮我吗？谢谢!
最佳答案
即使这是一个很老的话题，我也试图提出一个解决方案。输入的左侧最大化(100% 宽度)table-cell，右侧 table-cell 未定义长度。带有 nowrap 的两个表格单元格的内容。
检查这里的 fiddle :http://jsfiddle.net/jpavel76/hL5ggv4L/
关于html - 如何让一个按钮在右边，两个输入在左边来填充一行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26349282/