如何将元素向右浮动

Question

在下面的HTML代码中，btnContinue显示为txtClientID如何使btnContinue出现在txtClientID旁边。 style="float: right;没有帮助。

摘录：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

我想你想要这样的东西：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

同时检查：Align to right with offset