设置mailchimp表单的样式

Question

I'm trying to close the distance between the checkboxes and the labels. I would like them to sit inline.

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';
    }

Live sample http://www.oatbook.co.uk/signup-pro.html

Answer 1

#mc_embed_signup_pro input has a style of width: 510px; , which is being applied to your input fields above as well as your input checkboxes. You need to make a seperate style for your checkboxes so they can both have independent widths.

Also, not sure if you intended it, but on my browser your checkboxes are REALLY big and blurred, 38px x 38px

edit: response to first comment

First, you have !important on assigned to the width of #mc_embed_signup_pro input imput tags. !important will override any style no matter where it sits in your CSS, (even inline) so you will want to remove that. There is a second one here you will need to remove:

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

This is probably why you added the !important to the 510px width in the first place? Next you'll want to actually add a class declaration to these bits

<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;
    }

You are going to have some unecessary code here, though, because the styles from <input> and #mc_embed_signup_pro input are adding styles you don't want to the checkbox inputs. The best thing you could do is put unique classes for each input type and style those instead of using the descendant selector #mc_embed_signup_pro input . By using input you are stying all input tags, not just the classes assigned to them. The only styles that should be applied to input are the ones that are universally applicable. Otherwise you are writing styles, then overwriting them later rather than never having applied them at all.

I hope this makes sense.