右对齐字体超赞的微调器

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>