0

私は自分で解決できないという問題に直面しています。何時間もかけて微調整を行っていますが、問題はまだ残っています。問題は、ブラウザ (Google Chrome の最新バージョン) の画面のサイズを変更すると、チェックボックスが互いの下に表示されず、ボタンが中央に配置されないことです。画像を見るここに画像の説明を入力

HTML コード:

<form method="post" action="#" id="newsletterform" data-mailchimp="xtrue">
          <div>
            <label for="newsletter-name"></label>
            <input type="text" placeholder="Name" class="input-field" id="newsletter-name" name="newsletter-name" value="">
          </div>
          <div>
            <label for="newsletter-email"></label>
            <input type="text" placeholder="e-mail" class="input-field" id="newsletter-email" name="newsletter-email" value="">
          </div>
          </br>
          <div class="input-check">
            <label for="newsletter-checkbox1">
            <input type="checkbox" class="input-check" id="newsletter-checkbox" name="newsletter-checkbox" value="check">
            <span style="width:120px;margin-top:30px;display:inline-block;clear">some text to check</span>
            <input type="checkbox" class="input-check" id="newsletter-checkbox" name="newsletter-checkbox2" value="check">
            <span style="width:120px;margin-top:30px;display:inline-block;">some text to check2</span>
          </div>
           <div>
          <a id="button-newsletter" href="#" title="Subscribe now">Subscribe</a>
        </form>
</div>

CSS コード:

.container {
    position:relative
}

#newsletterform {
    float: right;
    margin-top: -87px
}

#newsletterform div {
    height: 45px;
    float: left;
    margin: 5px 50px 0px 0px;
}

#newsletterform input {
    padding: 10px 18px!important
}

#newsletterform label {
    color:#fff;
    text-shadow: 1px 1px rgba(0,0,0,.25);
    font-size:12px
}

a#button-newsletter {
    color:#fff;
    padding:11px 32px 10px 32px;
    background:#111;
    display:block;
    float:left;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-top: 30px;
    margin-left: 78px;
    font-size:14px
}

a:hover#button-newsletter {
    text-decoration:none;
    background:#222
}
4

1 に答える 1