Question

有以下代码：

<div class="form-group ng-scope">
  <label class="col-sm-3 control-label" for="without_duration">Without duration</label>
  <div class="col-sm-9">
    <input class="ng-untouched ng-valid ng-dirty ng-valid-parse" type="checkbox" ng-model="news.without_duration" name="without_duration">
  </div>
</div>

问题如下：我在标签中有一些文字，但复选框没有垂直对齐标签。我该如何解决？

Answer 1

由于这些是浮动的，因此将margin-top添加到包含复选框的div中，以便它与标签垂直对齐。

Answer 2

这部分CSS可以快速为您节省：

label, input{
    float: left;
}

但是要给一些课程标注和输入，因为您不想影响您网站上的所有输入和标签。 Codepen Sample

Answer 3

只是

label {
    display: inline-block;
}
.col-sm-9 {
    display: inline-block;
}

将提供您想要的输出。

检查Fiddle

Answer 4

嗯，你只需要在pull-left和label上使用bootstrap类div，如图所示 here

<div class="form-group ng-scope">
  <label class="col-sm-3 control-label pull-left" for="without_duration">Without duration</label>
  <div class="col-sm-9">
    <input class="ng-untouched ng-valid pull-left ng-dirty ng-valid-parse" type="checkbox" ng-model="news.without_duration" name="without_duration">
  </div>
</div>

问题：由于div为display: block;所以复选框转到下一行......

解决方案： JSFIddle ，将float: left;应用于label和div !!

Answer 5

请在下面查看我的详细信息

<div class="form-group ng-scope">
   <div class="col-sm-9"> <label class="col-sm-3 control-label" for="without_duration">Without duration</label>

    <input class="ng-untouched ng-valid ng-dirty ng-valid-parse" type="checkbox" ng-model="news.without_duration" name="without_duration">
  </div>
</div>
</pre>
or

<div class="form-group ng-scope">
    <label class="col-sm-3 control-label" for="without_duration">Without duration</label>

    <input class="ng-untouched ng-valid ng-dirty ng-valid-parse" type="checkbox" ng-model="news.without_duration" name="without_duration">
  
</div>

使用CSS

5 个答案: