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の幅を割り当てます。CSS のどこにいても（インラインであっても）スタイルをオーバーライドするため、それを削除する必要があります。ここには、削除する必要がある 2 番目のものがあります。#mc_embed_signup_pro input imput!important

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 に答える