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 に答える