html - h3 右侧的 Bootstrap 按钮

Question

在代码blow中，取决于我是否使用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>