0

ウェブサイトへのリンク

これです。Web サイトをデプロイして最終的に完成させる前に修正しなければならない最後のステップです。しかし、この問題を解決する方法がわかりません。なぜかお問い合わせフォームの左側に余白があり、計測値がずれているように見えます。テスト用に設定した境界線をよく見ると、コンテンツが中型および小型のデバイス画面にある緑色の境界線と正確に位置合わせして中央に配置する必要があります。最新のブラウザー (firefox) でページを縮小すると、フォームが左に移動し、右に余白があるように見えます。現在、最新のブラウザーと IE で同じように見えます (これは良いことです)。これらの古いブラウザーとの一貫性を維持するために、修正を希望します。フォームの幅を変更して、ソーシャル アイコンに対して行ったことを実行して複数のコンテナー内に配置しようとしましたが、うまくいきませんでした (間違っている場合を除きます)。誰かがこれを修正するのを手伝ってくれたら、本当に感謝しています。私は今週末の残りの期間、オンラインで常に変更を行い、一貫して更新を行うので、変更がすぐに反映されることを確認できます。

問題の視覚的表現:

ここに画像の説明を入力

ここに画像の説明を入力

HTML:

<div id="main_section">
                <div id = "center">

                <div id="contact_section">
                    <form method="POST" action="contact.php">
                    <span class="label">Name</span><br/>
                    <input type="text" class="textfield" name="name" size="50" maxlength="50"><br/>
                    <span class="label">Email</span><br/>
                    <input type="text" class="textfield" name="email" size="50" maxlength="50"><br/>
                    <span class="label">Subject</span><br/>
                    <input type="text" class="textfield" name="subject" size="50" maxlength="50"><br/>
                    <span class="label">Message</span><br/>
                    <textarea rows="5" cols="50" name="message" id="textarea" maxlength="500"></textarea><br/>
                    <input type="submit" value="Send" id="submit" name="action"> 
                    </form>
                </div>
                </div>

        </div>

メインCSS:

#contact_section {
    max-width:100%;
    margin-bottom:40px;
    margin-right: 0px;

    margin-top:20px;
    padding: 20px 6px 20px 6px; /*Make this smaller for 100% responsiveness*/
    border-radius:10px;
    background:#f1f1f1;
    box-shadow:0px 0px 15px #272727; 
    float:right;
    text-align:center;
}

中型および小型画面の CSS:

#center{
width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width:100%;
border: 1px red solid;
text-align:center;
}

#contact_section {
width:95%;
max-width:100%;
 margin-left: auto;
  margin-right: auto;
  text-align:center;
  border: 1px yellow solid;
}
4

2 に答える 2

0

緑のフレームと連絡先フォームの両方が実際には中央に配置されていないことに注意してください.使用するときは、フロートがまだ右に押していることは問題ではありません..私の提案は、両方のコンテナの幅float:rightを95% の代わりに 94% を加えて..margin-right:auto;margin-left:automargin-right:3%margin-left:3%

より具体的には、次のようにします。

#center {
    width: 94%;
    display: block;
    margin-left: 3%;
    margin-right: 3%;
    max-width: 100%;
    border: 1px red solid;
    text-align: center;
}

float:nonekoala_devが推奨するように、これまでフローティング要素を扱ってきたため、ページ全体が壊れる可能性があります（コンテナもフローティングなど）。

于 2013-06-29T19:41:03.597 に答える
0

問題は#contact_section、メインの CSS で右にフロートしているため、常に右に整列することです。divと小さな画面の CSS のfloat:none;両方で設定してみてください#details_sections#contact_section

編集

メイン レイアウトに関するコメントに応えて、div の幅をパーセンテージで設定してみてください。

#details_section {
  width: 40%;
  margin-right: 5%;
  float: left;
}

#contact_section {
  width: 55%;
  float: left;
}

#contact_section form{
  padding: 20px 6px 20px 6px;
}

そして、おそらく入力の最大幅を削除または調整したいと思うでしょう

于 2013-06-29T19:31:22.307 に答える