css - 添加 Font Awesome 图标内联但上标与其他元素

Question

我有两个具有类似问题的场景。我正在尝试添加一个很棒的字体图标:

1. 内联文本输入和“添加”按钮，但上标 ( JSFiddle1 )

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

1. 内联 Bootstrap 面板标题文本中的文本，但在标题区域的右上角 ( JSFiddle2 )

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

这是我希望每个人看起来的样子:

1. 
2. 

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

1. 在第一种情况下，图标有一个弹出框
2. 在第二种情况下，图标有一个下拉

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

Answer 1

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

JS Fiddle

对于您的第二个问题，您的 DIV 必须与 float 内联显示。这是它的 CSS:

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