我正在尝试左对齐iCheck复选框,但出于某种原因,无论我做什么,我都无法让它正常工作。在下面的屏幕截图中,复选框的左侧应与“标题”对齐,但它不会。
我觉得我刚刚一遍又一遍地尝试同样的事情,所以我想我会稍微休息一下,试图解决这个问题,看看这里有人可能有一些见解。我确信这是一个简单的解决方案,但由于某种原因,它完全无法解决我的问题。
编辑:显然我使用的其中一个网站有不正确的信息。 <div class="checkbox">
完全没必要,是造成对齐问题的原因。删除此div后,一切正常。
HTML:
<h3>Headline</h3>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" class="square-red" name="test_checkbox" value="1" checked>Checkbox text
</label>
</div>
</div>
CSS:
/* iCheck plugin Square skin, red
----------------------------------- */
.icheckbox_square-red,
.iradio_square-red {
display: inline-block;
*display: inline;
vertical-align: middle;
margin: 0;
padding: 0;
width: 22px;
height: 22px;
background: url(red.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox_square-red {
background-position: 0 0;
}
.icheckbox_square-red.hover {
background-position: -24px 0;
}
.icheckbox_square-red.checked {
background-position: -48px 0;
}
.icheckbox_square-red.disabled {
background-position: -72px 0;
cursor: default;
}
.icheckbox_square-red.checked.disabled {
background-position: -96px 0;
}
.iradio_square-red {
background-position: -120px 0;
}
.iradio_square-red.hover {
background-position: -144px 0;
}
.iradio_square-red.checked {
background-position: -168px 0;
}
.iradio_square-red.disabled {
background-position: -192px 0;
cursor: default;
}
.iradio_square-red.checked.disabled {
background-position: -216px 0;
}
/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.icheckbox_square-red,
.iradio_square-red {
background-image: url(red@2x.png);
-webkit-background-size: 240px 24px;
background-size: 240px 24px;
}
}
JS:
//Red color scheme for iCheck
$('input[type="checkbox"].square-red, input[type="radio"].square-red').iCheck({
checkboxClass: 'icheckbox_square-red',
radioClass: 'iradio_square-red'
});