问题响应式布局

Question

我正面临着一个问题，我不能自己解决它，我已经花了几个小时来调整，但问题仍然存在。问题是，当我的浏览器(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
}

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，如果不深入HTML就很难看到CSS文件中过多的css发生了什么。我注释掉了一些有浮点的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 fiddle http://jsfiddle.net/feitla/6TGM7/