【发布时间】：2014-08-30 05:22:30
【问题描述】：
大家好，这里有一个小问题，非常感谢您提供修复，感谢您即将提供的支持。
我有一个表单，并且想在登录出现问题时发布消息，例如密码错误或帐户尚未激活，但是当我添加该栏时，它只是将其推到它旁边，而不是放置消息栏下的表单。
我做错了什么？这是我的 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>
【问题讨论】：
-
它应该是什么样子？
-
消息栏应该在它上面，而不是彼此相邻。