如何將元素浮動到右側

Question

在下面的HTML代碼中，btnContinue顯示爲beneanth txtClientID我如何使btnContinue出現在txtClientID旁邊。 style="float: right;沒有幫助。

段：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<div class="row"> 
 
    <div class="col-md-12"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <div class="col-md-12"> 
 
      <div class="form-group"> 
 
      <label class="control-label">Client ID</label> 
 
      <input type="text" id="txtClientID" name="clientID" class="form-control input-md" /> 
 

 
      <button type="button" id="btnContinue" class="btn btn-success" ng-click="SetEverifyAccount()"> 
 
       <i ng-if="IsSaving" class="fa fa-spinner fa-pulse"></i> Continue 
 
      </button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

最好的辦法是使用另一個DIV和flexbox，並使其display: flex; flex-basis: row;也許justify-content: space-between但不一定。

Answer 2

如何將它們全部包裝在input-group之內？ 結帳我的fiddle。這可能會有所幫助。從小提琴

段：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="input-group"> 
 
    <input type="text" id="txtClientID" name="clientID" class="form-control input-md" placeholder="Client ID"/> 
 
    <span class="input-group-btn"> 
 
    <button type="button" id="btnContinue" class="btn btn-success" ng-click="SetEverifyAccount()"> 
 
       <i ng-if="IsSaving" class="fa fa-spinner fa-pulse"></i> Continue 
 
      </button> 
 
    </span> 
 
</div>

Answer 3

我想你想是這樣的：

.control-label { 
 
    padding-top: 0.5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<div class="row"> 
 
    <div class="col-xs-12 form-group"> 
 
    <label class="control-label col-xs-2">Client ID</label> 
 
    <div class="col-xs-7"> 
 
     <input type="text" id="txtClientID" name="clientID" class=" form-control input-md" /> 
 
    </div> 
 

 
    <button type="button" id="btnContinue" class="btn btn-success col-xs-3" ng-click="SetEverifyAccount()"> 
 
     <i ng-if="IsSaving" class="fa fa-spinner fa-pulse"></i> Continue 
 
    </button> 
 
    </div> 
 
</div>

還要檢查： Align to right with offset