jquery - 已定义输入时的 CSS 输入复选框

Question

我很难在表单中正确对齐复选框。我在这里创建了一个 jsfiddle 之前的 css 定义了一个输入，但我在 css 代码底部附近定义了一个特定的复选框输入。由于某种原因，它不起作用。

主要的CSS：

/*inputs*/
#msform input, #msform textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}

添加了复选框标签和输入（无法正常工作）

label {
    float: left;
    display: block;
    padding-left: 15px;
}
input[type=checkbox] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: middle;
    position: relative;
    top: 26px;
    right: 60px;
    *overflow: hidden;
}

Answer 1

您需要应用 id 中的样式#msform来完全覆盖先前的声明。

#msform input[type=checkbox] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: middle;
    position: relative;
    top: 26px;
    right: 60px;
    overflow: hidden;
}

现在尝试玩它。

Answer 2

在标签中添加宽度 100% 是对齐它们

label {
float: left;
display: block;
padding-left: 15px;
width:100%;
}