Question

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

| +---------------------+ +---------------------+ +------------------------------+ |
| |        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>

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

Answer 1

即使这是一个相当古老的话题，我试图找到解决方案。带输入的左侧最大化（100％宽度）table-cell，右侧table-cell具有未定义的长度。具有nowrap的两个表格单元格的内容。

点击此处的小提琴：http://jsfiddle.net/jpavel76/hL5ggv4L/

如何在右边有一个按钮，在左边有两个输入来填充线？

1 个答案: