Question

嘿伙计们，我对我申请margin元素的CSS checkbox无效的原因感到有些困惑。以下是我的代码示例：

HTML：

<div class="panel">
         <input id="bodytype-checkbox" class="float-checkbox" type="checkbox"/>
         <label for="bodytype-checkbox" class="label-checkbox">Bodytype</label>
</div>

CSS：

.float-checkbox{
    float:left;
    margin: 10px 10px 0 0;
    cursor: pointer;
}

知道我做错了什么吗？这是小提琴：http://jsfiddle.net/LvhCh/38/

Answer 1

看起来bootstrap.css在样式复选框时更加具体。

input[type=radio], input[type=checkbox] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}

它压倒了你的。

Answer 2

默认情况下，该复选框使用bootstraps.css边距。要覆盖它，请使用更具体的css选择器。使用以下css

input[type=checkbox].float-checkbox{
  float:left;
  margin: 10px 10px 0 0;
 cursor: pointer;
}

Answer 3

试试这个

input.float-checkbox{
    float:left;
    margin: 10px 10px 0 0;
    cursor: pointer;
}

Answer 4

标签上的边距...... CSS对复选框和其他表单元素有点搞笑。

label { margin-left: 10px; }

<强> DEMO

Answer 5

您需要在课程开头添加input JSFIDDLE

Answer 6

它不起作用的原因是你的CSS被bootstrap css覆盖了。这意味着你必须否决他们的CSS。你可以用多种方式做到这一点。

1）在CSS前面添加元素类型：input.float-checkbox

2）在CSS前添加另一个类：.panel .float-checkbox

保证金CSS不会影响复选框元素

6 个答案: