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

时间:2015-10-29 20:08:59

标签: html css

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

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

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

您可以使用内联块元素。您需要在主容器上将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%
}

答案 2 :(得分:0)

非常确定它是因为您使用的网格系统用#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>