Question

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>

我想在消息行之后创建一行，但是当我想要创建一行时，它不会让我创建行。不知道为什么。谁能帮我？？

以下是我的结果：

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

Answer 1

将clear:both;添加到.rTables类。

选项2：

您可以将 rTables 类放在 rTableRow div中，如下所示：

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

另外，如果你想制作一张桌子，请使用html table结构，它会对你有所帮助。

为什么我不能进入下一排呢？

1 个答案: