Question

如何正确对齐字体 - 令人敬畏的微调器，因此它将位于按钮的右侧

这不是代码：

      <div class="form-group row">
        <div class="offset-sm-2 col-sm-10">
          <button type="submit" class="btn btn-default">Sign up</button>
          <div><i class="fa-li fa fa-spinner fa-spin"></i></div>
        </div>
      </div>

虽然上面的代码有效，但是微调器始终位于按钮的左侧，尝试了很多不同的方法来实现这一点

Answer 1

类 fa-li 是导致问题的原因，它使图标有一个position:absolute并将其定位在左侧

所以你需要删除这个类。

如果您希望它显示在按钮内而不是移动i标记内的button标记

请参阅代码段：

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
  <div class="offset-sm-2 col-sm-10">
    <button type="submit" class="btn btn-default">
     Sign up <i class="fa fa-spinner fa-spin"></i>
    </button>
  </div>
</div>

或者只是把它放在外面，它就在按钮旁边

请参阅代码段：

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
  <div class="offset-sm-2 col-sm-10">
    <button type="submit" class="btn btn-default">
         Sign up 
    </button>
    <i class="fa fa-spinner fa-spin"></i>
  </div>
</div>

右对齐font-awesome微调器

1 个答案: