造型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的唯一样式是普遍适用的样式。否则，你正在写风格，然后覆盖它们，而不是从来没有应用它们。

我希望这是有道理的。