标签和复选框内嵌高度修复

Question

我可以在不使用line-height或任何其他CSS的情况下制作标签和复选框内联和高度相等吗？

与line-height（解决方法）http://jsfiddle.net/yeao6ph7/3/

一起工作

没有CSS的小提琴http://jsfiddle.net/yeao6ph7/2/

HTML

<div class="form">
    <form class="form-horizontal" name="myform" action="">
        <div class="form-group">
            <div class="col-xs-3 control-label">
                <label for="inputCheckbox">Is Checked ?</label>
            </div>
            <div class="col-xs-9">
                <div class="checkbox">
                  <label>
                      <input type="checkbox" id="inputCheckbox" value="option1"/>
                  </label>
                </div>
            </div>
        </div>
    </form>
</div>

输出：

预期输出：

如果css是唯一选项，那么line-height: 35px;是正确的解决方案吗？因为input字段可以是large，也可以是small。

谢谢， Jigar。

更新

form-horizontal写得不正确。问题是一样的，小提琴更新了。需要line-height: 35px;来调整身高。

更新2

下面有很多label，下面有很多input。所以左边的checkbox无济于事。

Answer 1

您的html只需更改即可fiddle

只要您的输入与标签直接相关，那么您可以将它放在标签容器中。

#inputCheckbox {
  display: inline-block;
}

<div class="form">
  <form class="form-horizantable" name="myform" action="">
    <div class="form-group">
      <div class="col-xs-3 control-label">
        <label for="inputCheckbox">Is Checked ?
          <input type="checkbox" id="inputCheckbox" value="option1" />
        </label>
      </div>
    </div>
  </form>
</div>

Answer 2

已移除<div class="checkbox">

通过bootstrap包含CSS：

.checkbox, .radio {
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
    position: relative;
}

http://jsfiddle.net/yeao6ph7/12/

我已按照Official Bootstrap Example

将此div添加到课程checkbox