如何将元素浮动到右侧

-1

在下面的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>

来源

2016-05-06 BumbleBee

将txtClientID浮动到左侧，而btn继续向右。只浮动右边的第二个将不起作用。你需要做到这一点。或者你可以使用Bootstrap的辅助类：http://getbootstrap.com/css/#helper-classes-floats – coopersita

尝试用类“text-right”包装该按钮 – claudios

form class =“form-inline”？ –

最好的办法是使用另一个DIV和flexbox，并使其display: flex; flex-basis: row;也许justify-content: space-between但不一定。

来源

2016-05-06 16:32:25

如何将它们全部包装在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>

来源

2016-05-06 17:19:24 claudios

我想你想是这样的：

.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

来源

2016-05-06 17:21:13

好的解决方案:) – claudios

@claudios谢谢。刚刚检查你的解决方案也很好。 –

如何将元素浮动到右侧

回答

相关问题