2012-06-21 53 views
0

我試圖關閉複選框和標籤之間的距離。我希望他們坐在內聯。造型mailchimp表格

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

回答

1

#mc_embed_signup_pro inputwidth: 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的唯一樣式是普遍適用的樣式。否則,你正在寫風格,然後覆蓋它們,而不是從來沒有應用它們。

我希望這是有道理的。

+0

感謝@kristina,它實際上將這些複選框用新風格定位是我無法做到的。即:'#mc_embed_signup_pro .checkbox {margin-right:0px;}似乎沒有做任何事情。有任何想法嗎? – Rob

+0

編輯了最初的帖子來回答 –