如何制作< h4>元素与按钮在同一行上? [英] How to make <h4> element on the same line with buttons?
问题描述
我有这个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>
如何使用右侧的按钮在同一行中创建< h4>
元素?
How can I make <h4>
element on the same row with the buttons on the right side?
推荐答案
您必须为标题< h4>
添加以下CSS:
You have to add the following CSS for the heading <h4>
:
h4 {
display:inline-block;
float:left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
display
属性的默认值为 block
,因此标题(< h4>
)占据了父容器的整个宽度.使用 display:inline-block
,标题仅占用所需的空间.
The default value of the display
property is block
so the heading (<h4>
) takes the full width of the parent container. With display: inline-block
the heading takes only the space needed.
Bootstrap 3.3
您可以设置类 .pull-left
到< h4>
元素.因此,您不需要其他CSS规则:
You can set the class .pull-left
to the <h4>
element. So you don't need additional CSS rules:
<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>
Bootstrap 4.0 +
自Bootstrap 4.0起,您必须使用 .float-left
而不是 .pull-left
:
Since Bootstrap 4.0 you have to use .float-left
instead of .pull-left
:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<h4 class="float-left"><span class="label label-default">1546 - some text</span></h4>
<div class="float-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>
这篇关于如何制作< h4>元素与按钮在同一行上?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!