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

Question

我想要

  [  ] Option 1
  [  ] Option 2

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

  [  ] Option 1
       [  ] Option 2

需要在 CSS 中进行哪些更改才能使框左对齐？谢谢

Answer 1

这是因为您没有清除浮动

演示

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