0

我真的陷入了这个愚蠢的问题。我现在只在这个问题上花费 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>

这是什么原因造成的？请帮忙，我需要把那个带有标题的输入字段放在中心，如图所示。

4

1 回答 1

2

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

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

如果要居中固定宽度的元素，最好使用自动推导的边距：

.newsletter{
    width: /* ... */
    margin: auto;
}
于 2013-08-18T08:52:44.577 回答