Question

我有两个类似问题的情景。我试图添加字体真棒图标：

内嵌文字输入并添加＆＃39;按钮，但上标（JSFiddle1）

＆＃13;

<div>
  <div class="input-group">
  <input class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" id="copy-link" type="button">
      <i class="fa fa-files-o"></i> Copy
    </button>
  </span>
  </div>
  <span>
  <i class="fa fa-info-circle"></i>
  </span>
</div>

＆＃13;

在引导程序面板标题文本中与文本内联，但在标题区域的右上角（JSFiddle2）

＆＃13;

<div class="panel panel-default">
  <div class="panel-heading">
    <b>
      Text
    </b>
    <span>
      <div class="dropdown">
        <i class="fa fa-cog dropdown-toggle listing-cog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
      </div>
    </span>
  </div>
  <div class="panel-body">
  </div>
</div>

＆＃13;

以下是我希望每个人看的内容：

我不知道这是否重要，但作为旁注：

在第一个场景中，图标有一个popover
在第二个方案中，图标有一个下拉列表

我不认为这些对布局有任何影响，所以我省略了相关的代码。

Answer 1

对于第一个问题，您的HTML结构是错误的。您需要在输入组DIV中添加图标。还要做上标，你需要一个CSS类。以下是您的更新代码：

JS Fiddle

对于您的第二个问题，您的DIV必须与浮选一起显示。这是它的CSS：

.dropdown {
  display:inline-block;
  float:right
}

Answer 2

第一期：JS Fiddle

对于你的第二个问题，Raed N.之前说过，只需添加一个浮动：直到你的下拉列表：

.dropdown {  float:right; }

添加字体真棒图标内联但上标与其他元素

2 个答案: