なぜ私は次の行に行くことができないのですか？

-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：

あなたがそうのようなrTableRow divの内側にrTablesクラスを置くことができます。また

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

あなたがテーブルを作りたい場合は、HTMLを使用してくださいtable構造は、あなたの多くを助けるでしょう。

出典

2017-08-31 06:56:45

なぜ私は次の行に行くことができないのですか？

答えて

関連する問題