html - 向右浮动元素

Question

代码

<div class="input-group">
  <div class="input-group-addon">
    <i class="fa fa-search"></i>
  </div>
  <input type="text" class="form-control" id="txtPreCurrentdate" data-provide="datepicker" placeholder="Enter a Start Date">
  <span class="input-group-addon">-</span>
  <input type="text" class="form-control" id="txtPostCurrentdate" data-provide="datepicker" placeholder="Enter an End Date">


  <!-- want the below section to move to the right. -->
  <div class="input-group-addon">
    <i class="fa fa-server"></i>
  </div>
  <input type="number" id="txtResltsPerPage" class="form-control" ng-model="pageSize" placeholder="Results per Page 10">
</div>

使用上面的代码，所有元素都会出现在彼此旁边，如上图所示。我需要最后一个 <input>和 <div>上面代码中的元素出现在form的右侧.

Answer 1

包装这个:

<div class="input-group-addon">
             <i class="fa fa-server"></i>
</div>
<input type="number" id="txtResltsPerPage" class="form-control" ng-model="pageSize" placeholder="Results per Page 10">  

带有 <div class="pull-right"></div> , 请参阅 Docs关于助手类 float