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>元素的顶部都有一些边距。第二个div的第一个<p>是造成差距的那个。

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

Answer 2

您可以使用许多解决方案来解决问题。这是我的：

https://jsfiddle.net/y0mxq4gn/

我只是将您的div包裹在另一个div中，充当容器。这个容器是一个“ flexbox”。在这里看看：

https://www.w3schools.com/css/css3_flexbox.asp

这些功能非常强大，特别是在创建“各种布局”时。我刚刚放置了这个“ flexbox”，并使它的子级跟随垂直流。默认情况下，除非在大多数情况下通过CSS进行设置，否则元素之间不会出现间距。

Answer 3

从.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%;
}
.usernamevalidation p:first-child {
  margin-top: 0;
}

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

Answer 4

您只需要在.usernamevalidation中设置display:flow-root;，就可以实现技巧，如下所示。

.usernamealert {
  background-color: #262626;
  text-align: center;
  margin: auto;
  height: 60px;
  width: 80%;
}

.usernamevalidation {
  background-color: #262626;
  text-align: left;
  margin: auto;
  display:flow-root;
  height: 150px;
  width: 80%;
}

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

Answer 5

您可以根据需要设置p的样式，并为不同的段落设置样式。但是内联css并不是很好的编码样式-它使您多次重复类似的代码，并且html文件变得太大而混乱。

p {
  font-family:Impact;
  color: white;
  font-size:28px;
  margin: 10px 0;
  text-align: left;
}
p.alert {
  color: red;
  text-align: center;
}
p.list {
  text-indent: 30pt;
  margin: 0;
}
p.list:before {
  content: "- ";
}
.usernamealert {
  background-color: #262626;
  text-align: center;
  margin: auto;
  padding: 10px;
  height: auto;
  width: 30%;
}

<div class="usernamealert">
  <p class="alert">ALERT</p>
  <p>Username should contain:</p>
  <p class="list">At least 5 characters</p>
  <p class="list">Letters and integers only</p>
</div>

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

5 个答案: