h3右侧的引导按钮

Question

在代码打击中，取决于我是否使用display:inline-block，加号按钮被放置在右上或右下，但从未与h3放在同一行。

有什么问题吗？

https://jsfiddle.net/DTcHh/35253/

​

<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

你想要这样：

​

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

​

Answer 2

将pull-right类添加到span中，并将其置于<h3>下。在代码片段中可以看到两个结果。

1. 当您使用style="display:inline-block;"时。
2. 没有任何样式的普通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 3

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

​

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

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

​