Question

我正在尝试左对齐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'
});

无法左对齐iCheck复选框

0 个答案: