Question

我有两个复选框，我想在一行中对齐这些复选框。我无法在一行中对齐以下复选框，请告诉我该怎么做

<div class="form-group">
  <label class="col-lg-3 col-md-3 control-label">From:*</label>
  <div class="col-lg-3 col-md-3">
     <input type="checkbox" ng-model="checkbox1" >
  </div>

  <label class="col-lg-2 col-md-9 control-label">To:*</label>
  <div class="col-lg-3 col-md-3">
     <input type="checkbox" ng-model="checkbox2" >
  </div>
</div>

Answer 1

删除输入周围的div，或者提供所有元素float:left

Answer 2

您可以使用内联块元素。您需要在主容器上将font-size设置为0，以便能够在每行两个元素的总宽度中使用100％。

.form-group{
 font-size:0;
}

.form-group label{
 display: inline-block;
 width: 40%
 font-size: 14px;
}

.form-group div{
 display: inline-block;
 width: 60%
}

Answer 3

非常确定它是因为您使用的网格系统用＃34; col-lg-3 col-md-3等分隔每个类。当我最小化我的浏览器时，它是在两个单独的行上但是当我展开我的浏览器，您的代码会在同一行显示它。你可以用这样的东西来修复它

<div class="form-group">
<div class="col-lg-12">
    <label class="control-label">From:*</label>
    <input type="checkbox" ng-model="checkbox1" >

    <label class="control-label">To:*</label>
    <input type="checkbox" ng-model="checkbox2" >
</div>
</div>

如何在一行中对齐复选框？

3 个答案: