0

链接到网站

就是这个。在部署我的网站并最终完成之前，我必须修复的最后一步。但我不知道如何解决这个问题。出于某种原因，联系表格的左侧似乎有一个边距，并且测量值已关闭。如果您仔细查看我为测试设置的边框，我希望它与我的内容在中小型设备屏幕上的绿色边框完全对齐并居中。当我在现代浏览器（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

问题是你#contact_section在你的主 CSS 上浮动，所以它总是正确对齐。尝试float:none;在您的 div#details_sections和#contact_section小屏幕 CSS上进行设置

编辑

为了回应您对主要布局的评论，请尝试以百分比设置您的 div 宽度：

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

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

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

你可能想删除或调整你的输入 max-width

于 2013-06-29T19:31:22.307 回答
0

请注意，您的绿色框架和联系表格都没有真正居中..当您使用时，您拥有并float:right没有关系，因为浮动仍然向右推..我的建议是将两个容器的宽度设置为94% 而不是 95% 并添加和..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:none正如 koala_dev 推荐的那样，可能会破坏整个页面，因为到目前为止您一直在使用浮动元素（您的容器也是浮动的等）..

于 2013-06-29T19:41:03.597 回答