CSS/HTML <form> 破坏了 chrome 中的布局答案

【问题标题】：CSS/HTML <form> breaks layout in chromeCSS/HTML <form> 破坏了 chrome 中的布局
【发布时间】：2014-10-21 17:22:10
【问题描述】：

我创建了一个“联系我们”页面，用户应该在其中填写表格，当然还要提交/发送。现在，当我添加<form>...</form> 标签时，布局就会中断。似乎它只发生在 chrome 中（还不是 100% 确定）。

然而，令人惊讶的是，如果我不刷新页面，而是使用菜单（点击联系我们）布局/设计就很好了。似乎问题是由<form> 标签引起的。没有它，布局/设计很好

应该如何 <form> 标签的情况如何

请查看我的 .css 或 .html 是否有问题。

CSS.css：

body{
    background-color: #80B2E6;
    font-family: "Times New Roman", Georgia, Serif;
    font-size: medium;
    padding: 0px;
}

nav{
    height:3.5em;
}

#Content{
    padding:10px;
    width: 580px;
    margin-left: auto;
    margin-right: auto;
    background-color:#B89470;
}

#Content h2{
    text-align:center;
    display: block;
}

#Menu{
    background-color:#AD855C;
    display: block;
}

#Header{
    background-color:#AD855C;
    width: 600px;
    margin: 0 auto;
}

#Logo{
    background-image:url('Library/Misc/LogoBG.jpg');
    background-size: 100% 100%;
    height:100px
}

#Logo h2{
    text-align:center;
    vertical-align:middle;
}

.Line{
    margin:0;
    padding:0;
    height: 3.5em;
    border-right: 2px solid #000000;
    float:left;
    display: inline-block;
}

a.MMLink{
    text-decoration: none;
    background-color:#AD855C;
    height: 1.5em;
    padding: 1em;
    display:inline-block;
    float: left;
}

a.MMLink:hover{
    background-color: #CEB69D;
    color:black;
}
a.MMLink:link{
    color:black;
}
a.MMLink:visited{
    color:black;
}
a.MMLink:active{
    background-color: #CEB69D;
    color:black;
}

#MenuLeft{
    float: left;
    display: inline-block;
}

#MenuRight{
    float: right;
    display: inline-block;
}

.NewsFeed{
    text-decoration:underline;
    font-weight:bold;
}

.Form {
    width: 400px;
    border: 2px solid black;
    margin-left: auto;
    margin-right: auto;
    margin:0;
    padding:0;
}

HTML Contactus.html：

<!DOCTYPE html>
<html>
    <head>
        <title>
            A page
        </title>

        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="CSS.css" />

    </head>
    <body>



        <div id="Header">
            <div id="Logo">
                <h2>  My Header </h2>
            </div>

            <nav>
                <div id="MenuLeft">
                    <a class="MMLink" href="Index.php">Home</a>
                    <div class="Line"></div>
                    <a class="MMLink" href="About.html">About</a>
                    <div class="Line"></div>
                    <a class="MMLink" href="Contactus.php">Contact Us</a>
                    <div class="Line"></div>
                </div>

                <div id="MenuRight">
                    <div class="Line"></div>
                    <a class="MMLink" href="Login.php">Login</a>
                    <div class="Line"></div>
                    <a class="MMLink" href="Signup.php">Sign-Up</a>
                </div>

            </nav>
        </div>




        <div id="Content">
            <h2>Contact us!</h2>
            <hr/>
            <p>
                That ironical, but if you've encountered a problem, a bug, or just want to contact us,
                <br/>
                please feel free to fill the next form.
            </p>

            <form>
            input fields go here
            <br/>
            </form>

            <p>some text2</p>
        </div>
    </body>
</html>

【问题讨论】：

我可能是 2cool4school 但我的 JSfiddle 你的代码显示了你想要的方式：jsfiddle.net/74aaj5hx
顺便说一句 - 大写选择器通常对 CSS/HTML 来说是不好的做法。这不是非法的或任何东西，只是不适用于类和 ID。 CSS 选择器是区分大小写的，并且您将来会面临未知错误的风险（即 - 显示不正确，因为您在 CSS 文件的深处输入了#content 而不是#Content）。由于您在类上过度使用 id 选择器，也可能发生此问题。这是一篇很棒的文章 - cssguidelin.es/#css-selectors。只是来自开发伙伴的思考:)

标签： html css forms

【解决方案1】：

这可能是您的花车的问题。尝试将clear:both 添加到#content：

#Content{
    padding:10px;
    width: 580px;
    margin-left: auto;
    margin-right: auto;
    background-color:#B89470;
    clear:both:
}

在旁注中，我不会为您的垂直分隔线使用单独的div。尝试在.MMlink 上使用border-left 和/或border-right。还要在你的<h2>Contact Us</h2> 上使用border-bottom 并去掉<hr />

以下是我如何通过相关的 CSS 更改来整理您的 HTML：http://jsfiddle.net/kzww8fvb/

【讨论】：

试过'clear:both'。布局仍然损坏，但看起来有点不同link 也，感谢关于边框的提示，没想到用它代替
和