什么css导致此复选框输入缩进

Question

我喜欢

  [  ] Option 1
  [  ] Option 2

但我得到了（http://jsfiddle.net/yN2E8/4/）

  [  ] Option 1
       [  ] Option 2

需要在CSS中更改哪些内容才能使框左对齐？感谢

Answer 1

这是因为你没有清理你的花车

Demo

<div style="clear: both;"></div>

如果您不想添加专门用于清除浮动的元素，您也可以使用它，我个人从不使用

.chkitemcontainer {
   overflow: hidden;
}

此外，如果您不想使用旧版浏览器，也可以使用带有显示表属性的:after选择器自行清除父元素

Answer 2

你的HTML是一团糟，尽量不要过度使用div并坚持使用语义HTML，例如在http://jsfiddle.net/yN2E8/6/中，然后在HTML干净整洁之后设置元素的样式。浮动特别不应该用于通用布局问题，它们会产生比解决方案更多的问题，除非特别适合此目的。

HTML

<label><input type="checkbox"> Option 1</label>
<label><input type="checkbox"> Option 2</label>

CSS

label {
    display:block;
}