更正已修改的复选框和单选按钮和标签的位置

Question

我用CSS修改了复选框和单选按钮的样式，但现在按钮和标签的位置分散，在修改之前看起来不像...我不知道它有什么问题或者如何解决它，因为我之前从未修改过复选框和单选按钮。

编辑：

标签仍然与复选框重叠。

CSS：

    input[type="checkbox"],
input[type="radio"] {
   display: none;
}

input[type="checkbox"] + label {
   width: 8px;
   height: 8px;
   vertical-align: middle;
   display: inline-block;
   background: white;
   border-top: 1px solid rgb(128,128,128);
   border-left: 1px solid rgb(128,128,128);
   border-right: 1px solid rgb(200,200,200);
   border-bottom: 1px solid rgb(200,200,200);
   margin-top: 7px;
   padding-left: 10px;
}

我以为我可能会分割输入[type =“checkbox”和标签，而不是输入[type =“checkbox”] + label，但是复选框上的样式不起作用。

Answer 1

您指定的内容区域（width: 8px; height: 8px）;太小，所有内容都不适合div。因此，它们彼此重叠。

建议的解决方案不是指定有意width: 8px而只是分配input[type="checkbox"]而不label margin-left: 20px或其他像素数量。 http://jsfiddle.net/32Cjq/2/

这里进一步说明了更好 on styling labels and checkboxes, with your issue addressed