Question

我正面临一个问题，我无法自己解决这个问题，我花了几个小时调整和调整，但问题仍然存在。问题是，当我调整浏览器的屏幕大小（谷歌浏览器最新版本）时，复选框不会显示在彼此之下，并且按钮也不会居中。见图像 enter image description here

HTML CODE：

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

Answer 1

您的HTML中存在大量错误，未关闭的元素和不匹配的关闭。

<div class="container">
<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"></label>
        <input type="checkbox" class="input-check" id="newsletter-checkbox" name="newsletter-checkbox" value="check" /> <span class="span-style">some text to check</span>

    </div>
    <div class="input-check">
        <input type="checkbox" class="input-check" id="newsletter-checkbox" name="newsletter-checkbox2" value="check" /> <span class="span-style">some text to check2</span>

    </div>
    <div> <a id="button-newsletter" href="#" title="Subscribe now">Subscribe</a>
    </div>
    <div class="clear"></div>
</form>

只需清理它就可以修复它。我还将两个复选框的div class="input check"分成两个div，它们现在在调整屏幕大小时调整大小。此外，不要使用内联CSS，很难看到css文件中多余的CSS发生了什么，而不必深入挖掘HTML。我注释掉了一些具有浮动的CSS，这实际上是不必要的。

    .container {
    position:relative;
    margin:0 auto;
    width:500px;
}
/* #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:right;
    -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
}
.span-style {
    /*  width:120px; */
    margin-top:30px;
    display:inline-block;
}
.clear {
    clear:both;
}

JS小提琴http://jsfiddle.net/feitla/6TGM7/

发布响应布局

1 个答案: