大家好这里有一个小问题，非常感谢修复，感谢您即将到来的支持。
我有一个表单，想在登录出现问题时发布消息，例如密码错误或帐户未激活，但是当我添加栏时，它只是将其推到它旁边，而不是将其放在旁边消息栏下的表单。
我做错了什么？这是我的 jsfiddle:http://www.jsfiddle.net/g1cj39ty/
我不确定如何在不缩进 150 行代码的情况下发布代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>2 Column CSS Layout</TITLE>
<style type="text/css">
body {
margin:20px;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
background-color:#555;
}
#page {
background-color:#fff;
margin:0 auto;
text-align:left;
width:755px;
padding:0 10px;
}
#header {
border-bottom:0px solid #000;
height:30px;
line-height:30px
}
/* Begin Navigation Bar Styling */
#nav {
text-align:center;
line-height: 30px;
}
#nav ul {
text-align:center;
font-size:11px;
width:100%;
margin:0;
padding:0;
display:inline-block;
list-style:none;
background-color:#f2f2f2;
border-bottom:1px solid #ccc;
border-top:1px solid #ccc
}
#nav li {
margin:auto;
display:inline-block
}
#nav li a {
display:block;
padding:8px 15px;
text-decoration:none;
font-weight:700;
color:#069;
border-right:1px solid #ccc
}
#nav li a:hover {
color:#c00;
background-color:#fff
}
/* End navigation bar styling. */
#content {
padding:30px 0 30px 0;
width:100%;
background:none repeat scroll 0 0 none;
display:flex;
align-items:center;
}
#content p {
display: table-cell;
vertical-align: middle;
}
#footer {
height:30px;
line-height:30px;
border-top: 1px solid #000;
font-size:9pt
}
#footer p {
float: right;
}
.clear {
clear: both;
}
/* FORM CSS */
form {
margin:0 auto;
width: 300px;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
label {
float: left;
width: 33%;
}
input {
float: left;
margin-bottom: 10px;
width: 65%;
}
input[type=submit] {
padding:5px 15px;
background:#ccc;
border:0 none;
width: 100%;
cursor: pointer;
}
input[type=submit]:hover {
padding:5px 15px;
background:#a3a3a3;
border:0 none;
width: 100%;
cursor: pointer;
}
/* END FORM CSS */
.clean-gray{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
width:500px;
}
</style>
</HEAD>
<body>
<div id="page">
<div id="header">
<div style="float: left;">
Please Login
</div>
</div>
<div id="content">
<div class="clean-gray">Clean message box</div>
<form id="myForm" action="login.php" method="post">
<label for="un">Username</label>
<input type="text" id="un" placeholder="username"/>
<br/ >
<label for="pw">Password</label>
<input type="password" id="pw" placeholder="password"/>
<br/ >
<br class="clear">
<input type="submit" value="Login"> <br>
<div style="float: left;">
<a href="forgot.php">Forgot Password</a>
</div>
<div style="float: right;">
<a href="register.php">Register</a>
</div>
</form>
</div>
<div id="footer">
<div style="float: right;"> copyright 2014 </div>
</div>
</div>
</body>
</html>
最佳答案
您的问题是由 #content 中的 display: flex; 引起的。该样式启用 CSS3 flexbox layout mode这是一种控制容器中元素排列的方法，可以改变尺寸。简单一点，它基本上是一种制作专栏的方法。
您可以删除该样式，或者如果需要，您可以添加 flex-direction: column;(默认为 row)以强制表单位于栏下方。
此功能在现代浏览器中得到了很好的支持。根据 caniuse.com，它将在 IE11、Firefox 31+、Chrome 37+、Safari 7+ 和 Opera 23+ 中运行。在 caniuse page 有更多详细信息包括一些移动浏览器、已知问题和指向更多资源的链接。
关于html - div 不使用 clear 或 br 分隔行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25579296/