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只需要所需的空间。

仅使用Bootstrap的另一种解决方案

您可以将班级pull-left设置为<h4>。所以你不需要额外的CSS规则：

＆＃13;

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

＆＃13;

Answer 2

您必须为h4和pull-left添加一些CSS - class：

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

示例：

https://jsfiddle.net/y6f0ddLg/

如何使用按钮在同一行上创建<h4>标签？

2 个答案: