css - 元素左对齐

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/

如何使用 thw Twitter Bootstrap 类使文本和按钮显示在一行中并向左对齐？

Answer 1

仅限类(class)

按钮工具栏

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

Demo btn-toolbar

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

float

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

CSS

否则有几种解决方法:

没有按钮组

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

Demo no div

内联 block

或者您可以在所有元素上使用 display: inline-block;(但您应该将文本包含在 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>