html - 样式化 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 on 分配给 #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 的唯一样式是普遍适用的。否则，您正在编写样式，然后在稍后覆盖它们，而不是根本不应用它们。

我希望这是有道理的。