css - 将元素向左对齐

Question

我正在使用推特引导程序。这是我的代码：

<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

只上课

按钮工具栏

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

演示 btn 工具栏

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

漂浮的

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

CSS

否则有几种解决方案：

没有 btn 组

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

演示没有 div

内联块

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

演示内联块

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