Question

在代码中，取决于我是否使用display:inline-block，加号按钮位于右上角或右下角，但从不与h3位于同一行。

有什么问题？

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div style="border: 1px solid">
  <h3 style="text-align: center;display:inline-block">aaaaaaaaaaa</h3>
  <span class="glyphicon glyphicon-plus btn-flat" style="float:right;"></span>
</div>


<div style="border: 1px solid">
  <h3 style="text-align: center;">bbbbbbbbb</h3>
  <span class="glyphicon glyphicon-plus btn-flat" style="float:right;"></span>
</div>

Answer 1

在您的范围内添加pull-right课程，并将其放在<h3>下。您可以在代码段中看到两个结果。

使用style="display:inline-block;"。
普通h3没有任何风格。 heading的默认属性为disply:block。

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div style="border: 1px solid">
  <h3 style="display:inline-block;">aaaaaaaaaaa <span class="glyphicon glyphicon-plus btn-flat pull-right" style="font-size:small;padding-top: 6px;"></span></h3>

</div>


<div style="border: 1px solid">
  <h3 class="text-center">bbbbbbbbb <span class="glyphicon glyphicon-plus btn-flat pull-right" style="font-size: small; padding-top: 6px;"></h3>
  </span>
</div>

Answer 2

只需在两个标记中添加display: inline-block;属性。

＆＃13;

h3, span {display: inline-block;}
span {float: right; margin-top: 20px;} 
.glyphicon-plus::before {line-height: 30px;}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div style="border: 1px solid; text-align: center;">
  <h3>aaaaaaaaaaa</h3>
  <span class="glyphicon glyphicon-plus btn-flat"></span>
</div>

＆＃13;

Answer 3

你想这样：

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

  <div style="border: 1px solid">
  <h3 style="text-align:center; margin:0px; padding:10px 5px;">aaaaaaaaa
  <span class="glyphicon glyphicon-plus btn-flat" style="float:right; position:relative; top:8px; font-size:15px;"></span></h3>
  </div>


  <div style="border: 1px solid">
  <h3 style="text-align:center; margin:0px; padding:10px 5px;">bbbbbbbbb
  <span class="glyphicon glyphicon-plus btn-flat" style="float:right; position:relative; top:8px; font-size:15px;"></span></h3>
  </div>

＆＃13;

Answer 4

试试这个HTML

HTML

    <div style="border: 1px solid; text-align:center;">
  <h3 style="text-align: center;display:inline-block">aaaaaaaaaaa</h3>
  <span class="glyphicon glyphicon-plus btn-flat"></span>
</div>


<div style="border: 1px solid; text-align:center;">
  <h3 style="text-align: center; display:inline-block;">bbbbbbbbb</h3>
  <span class="glyphicon glyphicon-plus btn-flat"></span>
</div>

创建元素float，删除正常的DOM流。要对齐项目中心，您需要删除float属性并将text-align:center添加到父div

在span图标元素上使用line-height属性..

希望这有助于......

Answer 5

当你使用bootstrap.min.css时，你有预定义的类，所以只需将类应用到你的代码中，为此，请参阅下面的代码段，如果你不同意我的帖子，请忽略我

＆＃13;

{{1}}

＆＃13;

为h3 /整个div添加一个类文本中心，或者在需要的地方添加一个bootstrap预定义类

h3右侧的自举按钮

5 个答案: