0

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

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

4

1 回答 1

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是普遍适用的样式。否则，您正在编写样式，然后再覆盖它们，而不是根本没有应用它们。

我希望这是有道理的。

于 2012-06-21T23:39:19.540 回答