ボタンで同じ行に<h4>タグを作る方法は？

Question

私はこのHTMLを持っている：

<h4><span class="label label-default">1546 - some text</span></h4> 
<div class="pull-left"> 
    <button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button> 
    <button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button> 
    <button type="button" class="btn btn-default" ng-disabled="true">Cancel</button> 
</div> 

どのように私は右側のボタンと同じ行に要素を作ることができますか？

Answer 1

あなたは、以下のCSSを追加する必要があります。

h4 { 
    display:inline-block; 
    float:left; 
} 

デモ：https://jsfiddle.net/omc6oyra/1/

displayプロパティのデフォルトはblockあるので、見出しは、親の全幅を取りますコンテナ。 display:inline-blockでは、必要なスペースだけが必要です。ブートストラップを使用して

---

別の解決策だけ

あなたは<h4>へのクラスpull-leftを設定することができます。だから、追加のCSSルールを必要としない：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<h4 class="pull-left"><span class="label label-default">1546 - some text</span></h4> 
 
<div class="pull-left"> 
 
    <button type="button" class="btn btn-primary" ng-click="list.saveItems();" ng-disabled="!list.currentItems.length || list.currentItemsStatus.id == 1">Submit</button> 
 
    <button type="button" class="btn btn-default" ng-click="list.getItems()">Reload</button> 
 
    <button type="button" class="btn btn-default" ng-disabled="true">Cancel</button> 
 
</div>

Answer 2

あなたがh4とpull-left級のためにいくつかのCSSを追加する必要があります。

h4{ 
    display: inline-block; 
} 
.pull-left{ 
    display: inline-block; 
} 

例：

https://jsfiddle.net/y6f0ddLg/