javascript - 如何将一个css div框直接放在另一个css div框下面

Question

我需要直接位于“usernamealert”div 下的“usernamevalidation”div。

.usernamealert {
  background-color: #262626;
  text-align: center;
  margin: auto;
  height: 60px;
  width: 20%;
}

.usernamevalidation {
  background-color: #262626;
  text-align: left;
  margin: auto;
  height: 150px;
  width: 30%;
}

<div class="usernamealert">
  <p style="font-family:Impact; color:Red; font-size:28px;">ALERT</p>
</div>
<div class="usernamevalidation">
  <p style="font-family:Impact; color:White; font-size:28px;">Username should contain:
  </p>
  <p style="font-family:Impact; color:White; font-size:24px;">- At least 5 characters
  </p>
  <p style="font-family:Impact; color:White; font-size:24px;">- Letters and integers only</p>
</div>

它的意思是看起来像这样: enter image description here

Answer 1

每个<p>默认情况下，元素在顶部有一些边距。第一个<p>你的第二个 div 就是造成这个差距的那个。

.usernamealert {
  background-color: #262626;
  text-align: center;
  margin: auto;
  height: 60px;
  width: 20%;
}

.usernamevalidation {
  background-color: #262626;
  text-align: left;
  margin: auto;
  height: 150px;
  width: 30%;
}

<div class="usernamealert">
  <p style="font-family:Impact; color:Red; font-size:28px;">ALERT</p>
</div>
<div class="usernamevalidation">
  <p style="font-family:Impact; color:White; font-size:28px; margin-top:0">Username should contain:
  </p>
  <p style="font-family:Impact; color:White; font-size:24px;">- At least 5 characters
  </p>
  <p style="font-family:Impact; color:White; font-size:24px;">- Letters and integers only</p>
</div>