为什么我不能让它进入下一行？

-1

p { 
 
    font-size: 150%; 
 
} 
 

 
body { 
 
    background-image: url("images/gg.jpg"); 
 
    background-repeat: repeat; 
 
} 
 

 
.rTable { 
 
    display: block; 
 
    margin-top: 100px; 
 
    margin-bottom: 200px; 
 
    margin-right: 200px; 
 
    margin-left: 450px; 
 
} 
 

 
.rTableHeading, 
 
.rTableBody, 
 
.rTableFoot, 
 
.rTableRow { 
 
    clear: both; 
 
} 
 

 
.rTableHead, 
 
.rTableFoot { 
 
    background-color: white; 
 
    font-weight: bold; 
 
} 
 

 
.rTableHead { 
 
    background-color: white; 
 
    border: 1px solid #999999; 
 
    float: left; 
 
    height: 17px; 
 
    overflow: hidden; 
 
    padding: 3px 1.8%; 
 
    width: 36%; 
 
} 
 

 
.rTable:after { 
 
    display: table-cell; 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content: " "; 
 
    clear: both; 
 
    height: 0; 
 
} 
 

 
.rTableHeads { 
 
    background-color: white; 
 
    border: 1px solid #999999; 
 
    float: left; 
 
    height: 20px; 
 
    padding: 3px 1.8%; 
 
    width: 55%; 
 
} 
 

 
.rTableCell { 
 
    background-color: white; 
 
    border: 1px solid #999999; 
 
    float: left; 
 
    height: 17px; 
 
    overflow: hidden; 
 
    padding: 3px 1.8%; 
 
    width: 15%; 
 
} 
 

 
.rTableCells { 
 
    background-color: white; 
 
    border: 1px solid #999999; 
 
    float: left; 
 
    height: 60px; 
 
    overflow: hidden; 
 
    padding: 3px 1.8%; 
 
    width: 15%; 
 
} 
 

 
.rTableHea { 
 
    background-color: white; 
 
    border: 1px solid #999999; 
 
    float: left; 
 
    height: 60px; 
 
    overflow: hidden; 
 
    padding: 3px 1.8%; 
 
    width: 36%; 
 
} 
 

 
.rTables { 
 
    background-color: white; 
 
    border: 1px solid #999999; 
 
    float: left; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    padding: 3px 1.8%; 
 
    width: 15%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>hey contact </title> 
 
</head> 
 

 
<body> 
 
    <p style="text-align: center"> 
 
    <a href="index.html">index</a> 
 
    <a href="about.html">about</a> 
 
    <a href="media.html">media</a> 
 
    <a href="contact.html">contact</a> 
 
    </p> 
 
    <div class="rTable"> 
 
    <div class="rTableRow"> 
 
     <form> 
 
     <div class="rTableHeads" align="center"><strong>Contact me</strong></div> 
 

 
    </div> 
 
    <div class="rTableRow"> 
 
     <div class="rTableCell"> <label for="Name">Name:</label></div> 
 
     <!--label 
 
    is to lable name --> 
 
     <div class="rTableHead">&nbsp; 
 
     <input type="Name" class="form-control" id="name" placeholder="Enter 
 
     name" name="name"> 
 
     </div> 
 
     <!--placeholder let the enter name comment come out --> 
 
    </div> 
 
    <div class="rTableRow"> 
 
     <div class="rTableCell"><label for="Email">Email_address:</label> 
 
     </div> 
 
     <div class="rTableHead">&nbsp; 
 
     <input type="email" class="form-control" id="email" placeholder="Enter 
 
email" email="email"> 
 
     </div> 
 
    </div> 
 
    <div class="rTableRow"> 
 
     <div class="rTableCell">Subject : 
 
     </div> 
 
     <div class="rTableHead">&nbsp; <select name="subject"> 
 
<option value="webt">Web Design</option> 
 
<option value="programming">programming</option> 
 
<option value="data">Data management</option> 
 
<option value="math">Math</option> 
 
<option value="MPU">MPU</option> 
 
</select> 
 
     </div> 
 
    </div> 
 
    <div class="rTableRow"> 
 
     <div class="rTableCells">Message : 
 
     </div> 
 
     <div class="rTableHea">&nbsp; 
 
     <textarea name="comment" rows="5" cols="30"> 
 
    </textarea> 
 
     </div> 
 
    </div> 
 
    <div class="rTables" align="center"> </div> 
 
    <!--<div class="rTableHeads" align="center"><strong>Contact me</strong> 
 
    </div> --> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

我想打一排排的消息后，但是当我想打一个排它不会让我的行。不知道为什么。谁能帮我？？

这里是我的结果：

为什么我不能创建一个行，但它移动到消息部分的旁边？任何人都可以告诉我为什么我不能进入消息行下的另一行？

来源

2017-08-31 sozai

你可以做一个JSFiddle吗？ – Raptor

缩进至关重要！请在您的示例中修复缩进。从简单的角度来看，我认为问题来自未封闭或不匹配的标签，修复缩进将更容易找到问题。 –

将clear:both;加到.rTables类。

选项2：

你可以把rTables类rTableRow内，像这样格：

<div class="rTableRow"> 
    <div class="rTables" align="center"> </div> 
</div>

另外，如果你想使一个表，请使用HTML table结构，它会帮助你很多。

来源

2017-08-31 06:56:45

为什么我不能让它进入下一行？

回答

相关问题