样式化 mailchimp 表单

Question

我正在尝试缩小复选框和标签之间的距离。我希望他们排成一列。

CSS

#mc_embed_signup_pro {
    background: #fff;
    width: 520px;
    padding: 40px;
    }
#mc_embed_signup_pro input {
    height: 38px;
    width: 510px !important;
    font-family: Arial;
    font-size: 22px;
    text-transform: bold;
    color: #666;
    border: 1px #a3a3a3 solid;
    -moz-border-radius: 12px;
    border-radius: 12px;
    float: left;
    clear: both;
    }
#mc-field-group li {
    float: left;
    width: 30px;
    height: 40px;
    }
.check {
    background: aqua;
    float: right !important;
    }
#mc_embed_signup_pro label {
    margin-top: 20px;
    margin-bottom: 8px;
    float: left;
    }
#mc_embed_signup_pro .mc-field-group {
    margin-bottom: 10px;
    height:60px;
    clear: both;
    }
#mc_embed_signup_pro .button {
    background: #484848 !important;
    float: left;
    padding-top:3px !important;
    font-size: 32px !important;
    line-height: 20px !important;
    width: 150px !important;
    height: 46px !important;
    font-family: 'Populaire';
    }

现场样本 http://www.oatbook.co.uk/signup-pro.html

Answer 1

#mc_embed_signup_pro input 具有width: 510px; 的样式，它被应用于上面的输入字段以及输入复选框。您需要为复选框制作单独的样式，以便它们都可以具有独立的宽度。

另外，不确定你是否有意，但在我的浏览器上，你的复选框真的很大而且很模糊，38px x 38px

编辑：对第一条评论的回应

首先，您将!important 分配给#mc_embed_signup_pro input imput 标签的宽度。 !important 将覆盖任何样式，无论它位于 CSS 中的哪个位置（甚至是内联样式），因此您需要删除它。这里还有第二个需要删除：

input {
    border-radius: 12px 12px 12px 12px;
    color: #666666;
    float: left;
    font-family: Arial;
    font-size: 15px;
    height: 8px;
    width: 220px !important;
    }

这可能是您首先将!important 添加到 510px 宽度的原因？接下来，您需要为这些位添加一个类声明

<li>
    <input id="mce-group[1869]-1869-0" type="checkbox" name="group[1869][1]" value="1" class="checkbox">
    <label for="mce-group[1869]-1869-0" class="label">Medical Professional</label>
</li>

input.checkbox {
    width:20px; 
    float:right; 
    margin:0; 
    padding:0; 
    height:1em;
    }

input.label {
    width:200px; 
    float:left; 
    margin:0; 
    height: 1em;
    }

不过，这里会有一些不必要的代码，因为来自<input> 和#mc_embed_signup_pro input 的样式会将您不希望的样式添加到复选框输入中。您可以做的最好的事情是为每种输入类型放置唯一的类并设置它们的样式，而不是使用后代选择器#mc_embed_signup_pro input。通过使用input，您可以设置所有 输入标签，而不仅仅是分配给它们的类。应该应用于input 的唯一样式是普遍适用的样式。否则，您正在编写样式，然后再覆盖它们，而不是根本不应用它们。

我希望这是有道理的。