html - 为什么这个 CSS 不起作用？想放在左边

Question

我真的陷入了这个愚蠢的问题。我现在只花了 4 个小时来解决这个问题。

我有一个页面:http://bibago.de/test.html .如果将页面大小调整为 320px 宽度(iphone 大小)，它应该会变成这样的状态:http://imagebin.org/267953

但不起作用的是输入字段不在 iphone 大小的中间。

这是我的CSS:

.newsletter{
    width: 300px;
    padding-top: 40px;
    padding-bottom: 40px;
    clear: both;      
 }

html

<div class="newsletter">
    <p class="overinput">zu bibago auf dem laufenden bleiben</p>
      <div class="input-group newsletter1">                    
       <input type="text" class="form-control" id="email" placeholder="Hier Ihre E-Mail-Adresse eintragen..">
       <span class="input-group-btn">
       <button class="btn btn-default" style="background-color: #156ac6;color: #ffffff" type="button" onclick="senden()">Senden</button>
     </span>
  </div>
</div>

这是什么原因造成的？请帮助，我需要将该输入字段及其标题放在中心，如图所示。

Answer 1

你有一个相对边距(.newsletter {margin-left: 30%;} 在非 320px 版本中)和绝对负边距(.newsletter1 {margin-left: -15px).

300px 的 30% 是 96px，-15px 导致输入元素的左边距为 81px，这简直太多了。 (此外，不应混合相对值和绝对值，因为它们很可能会导致此类行为)。

如果你想让一个固定宽度的元素居中，最好使用自动推断的边距:

.newsletter{
    width: /* ... */
    margin: auto;
}