html - 在标题中输入右拉按钮

Question

我试图在标题右侧拉一个带有输入文本字段的按钮，这是我的代码:

<div class="page-header">
    <div class="pull-left">
        <h2>Header</h2>
    </div>
    <div class="pull-right">
        <div class="form-group label-floating">
            <label class="control-label" for="focusedInput1">Search</label>
            <input class="form-control" id="focusedInput1" type="text">
        </div>
        <button id="show-hide-filter-button" class="btn btn-raised btn-default">Mostra Filtro</button>
    </div>
    <div class="clearfix"></div>
</div>

如您所见，我在左侧有标题的标题，在右侧我想在同一行输入和一个或多个按钮，问题是如果我只添加按钮它工作完美，所有在同一行，如果我在输入中添加一个表单组，请分两行，如下图所示。

我怎样才能把所有的都放在同一行？

谢谢

Answer 1

尝试制作这个div

div class="form-group label-floating"

内联按钮

button id="show-hide-filter-button"

在 div 上使用 css "display: inline-block"(默认情况下它与 "display: block"一起使用)