问题响应式布局

我面临的一个问题是，我无法自己解决问题，我花了数小时调整和调整，但问题仍然存在。问题是，当调整我的浏览器的屏幕（谷歌浏览器最新版本）时，复选框不会显示在对方下方，而且按钮不是居中正确。请查看图片 enter image description here 问题响应式布局

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 
}

来源

2013-07-22 user1943906

浏览器？版？ Plattform？ – HerrSerker

谷歌Chrome最新版本（28.0.1500.72米） – user1943906

输入以及标签都是内联元素。最简单的解决方案是使用无序列表。您的按钮在任何屏幕尺寸上都不居中。您已设置了保证金余额，并且无论您如何更改屏幕，它都将保留在该保留的位置。你应该认真阅读一下关于响应式设计的理论。顺便说一句，你的最后一个div没有关闭。 –

你的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/

来源

2013-07-22 14:52:02 feitla

问题响应式布局

回答

相关问题