div没有用clear或br分隔线

时间：2014-08-30 05:22:30

标签： html css newline message

嘿，伙计们在这里遇到了一个小问题，我们非常感谢你们的修复，谢谢你们即将到来的支持。

我有一个表单，想要在登录时出现问题时发帖，例如密码错误或帐户没有被激活，但是当我添加条形图时，它只是将它推到旁边，而不是将表单放在消息栏下。

enter image description here

我做错了什么？这是我的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>

3 个答案:

答案 0 :(得分：2)

您的问题是由#content中的display: flex;引起的。该样式启用CSS3 flexbox layout mode，这是一种控制容器中元素排列的方法，可以更改维度。简单来说，它基本上是一种制作列的方法。

您可以删除该样式，或者如果需要，可以添加flex-direction: column;（默认为行）以强制该栏下方的表单。

现代浏览器相当支持此功能。根据caniuse.com，它可以在IE11，Firefox 31 +，Chrome 37 +，Safari 7+和Opera 23+中使用。 caniuse page上有更多详细信息，包括一些移动浏览器，已知问题以及指向更多资源的链接。

答案 1 :(得分：1)

删除display:flex; 从你的#content开始，然后从那里开始。

    #content {
 padding:30px 0 30px 0;
        width:100%;
        background:none repeat scroll 0 0 none;

        align-items:center;
    }
    #content p {
        display: table-cell;
        vertical-align: middle;
    }

更新了小提琴HERE

答案 2 :(得分：0)

我认为你正在寻找这样的东西不让我知道JSFIDDLE 

   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%;
    position:relative;
        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; 
    position:absolute;
    top:0px;
    left:15%;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
width:500px;
    }
相关问题
最新问题