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

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

我想我可以拆分 input[type="checkbox"和 label，而不是做 input[type="checkbox"] + label，但是复选框上的样式不起作用。

Answer 1

您分配的内容区域(宽度:8px；高度: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