右對齊字體超贊的微調器

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>