将元素对齐到左侧

Question

我正在使用twitter bootstrap。这是我的代码：

<div class="control-label">
    We
    <div class="btn-group">
        <a href="javascript:;" data-toggle="dropdown" class="btn dropdown-toggle">
            <span>search</span>&nbsp;&nbsp;<span class="caret"></span>
        </a>
    </div>
    Something
</div>

http://jsfiddle.net/3j7QP/

如何使用twitter bootstrap类使文本和按钮显示在左侧对齐的一行中？

Answer 1

仅限课程

Btn工具栏

如果您想严格遵守课程，可以尝试.btn-toolbar，但不会有垂直对齐。

Demo btn-toolbar

<div class="control-label btn-toolbar">
    <!-- ... -->
</div>

浮动

浮动似乎不是一个合适的解决方案，因为你失去了线的连续性。所以你不应该使用.pull-left。

CSS

否则有几种解决方案：

没有btn-group

首先，您可以删除div.btn-group，因为显然您没有使用它。

Demo no div

内联块

或者您可以对所有元素使用display: inline-block;（但是您应该将文本括在块中）。

Demo inline blocks

.myClass > div {
    vertical-align: middle;
    display: inline-block;
}

<div class="control-label myClass">
    <div>We</div>
    <div class="btn-group"><!-- ... --></div>
    <div>Something</div>
</div>