css - 要素を左に揃える

Question

Twitterのブートストラップを使用しています。これが私のコードです：

<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ブートストラップクラスを使用して、テキストとボタンを左揃えで1行に表示するにはどうすればよいですか?

Answer 1

クラスのみ

ボタンツールバー

クラスに厳密に固執したい場合は、試してみる.btn-toolbarことができますが、垂直方向の配置はできません。

デモボタンツールバー

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

フローティング

ラインの連続性が失われるため、フローティングは適切な解決策ではないようです。したがって、使用しないでください.pull-left。

CSS

それ以外の場合は、いくつかの解決策があります:

ボタングループなし

まず、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>