html - 发布响应式布局

Question

我遇到了一个我自己无法解决的问题，我花了好几个小时反复调整，但问题仍然存在。问题是在调整我的浏览器(谷歌浏览器最新版本)屏幕大小时，复选框不会显示在彼此下方，而且按钮没有居中。见图片

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 发生了什么。我注释掉了一些确实没有必要的带有 float 的 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/