如何在列表上右对齐文本框？

Question

我有一个列表，上面有一个搜索框。我想右对齐搜索框，以便搜索框的最右边缘与列表的最右边缘对齐。这是我正在使用的html片段（以及bootstrap-3）。

我创建了this fiddle来展示我现在拥有的东西。这正确地右对齐搜索框，但正如您所看到的，搜索框浮动在页面右侧。我希望它在列表之上，而不是漂浮在它之上。

我该怎么做？

这是小提琴代码：

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <form class="pull-right" role="form">
                <input class="form-control" placeholder="Filter" />
            </form>
            <ul>
                <li>...items</li>
            </ul>
        </div>
    </div>
</div>

Answer 1

您希望在浮动输入后在空div中使用Bootstrap类 clearfix 。

<div class="clearfix"></div>

http://jsfiddle.net/DWMtS/