检查元素时DIV中的元素[重复]答案

【问题标题】：Elements in wrong DIV when inspecting element [duplicate]检查元素时DIV中的元素[重复]
【发布时间】：2020-07-26 01:31:44
【问题描述】：

从下面的代码可以看出，h4 和 hr 标签应该是 .settings_title 的一部分，但是在检查 .options 时，它会突出显示 h4 和 hr 标签是分开它（见图）。

将边距/填充放置到“选项” div 时，它会将边距/填充放置在h4 和hr 标记之上，而它应该位于段落标记之上。

HTML：

                        <div class="settings_timer">
                            <div class="settings_title">
                                <h4>TIMER</h4>
                                <div>
                                    <hr>
                                </div>
                            </div>

                            <div class="options">
                                <p>Test</p>
                            </div>
                        </div>

CSS：

.settings h4 {
font-family: "Rubik", sans-serif;
font-size: 22px;
color: #36A2B0;
float: left;
margin-right: 15px;
}

.settings hr {
    color: #C4C4C4;
    float: left;
    width: 80%;
}

.settings .options {
    float: none;
}

【问题讨论】：

标签： html css css-float

【解决方案1】：

是因为float: left。

改用display: inline-block 或.settings_title { overflow: hidden }。

总是有.clearfix，但这可能有点复杂。这里有更多信息：

.settings_title {  overflow: hidden;  }

.settings h4 {
  font-family: "Rubik", sans-serif;
  font-size: 22px;
  color: #36A2B0;
  float: left;
  margin-right: 15px;
}

.settings hr {
  color: #C4C4C4;
  float: left;
  width: 80%;
}

.settings .options {
  float: none;
}

<div class="settings">
  <div class="settings_timer">
    <div class="settings_title">
      <h4>TIMER</h4>
      <div>
        <hr>
      </div>
    </div>

    <div class="options">
      <p>Test</p>
    </div>
  </div>
  <div>

【讨论】：

【解决方案2】：

有几种不同的方法可以做到这一点。我在想你想让<hr> 在中间垂直对齐吗？就像您可以使用带有边框的 :after 一样。

但要回答你的问题：

另一种方法是将clear: left、overflow: auto 和display: block 添加到容器中。这仅取决于您希望<hr> 做什么。

这曾经被称为用于浮动的 clearfix hack。您可能会发现 display: grid 是一种更好的方法，但这又取决于您希望 <hr> 做什么。

.settings_title {
  clear: left;
  overflow: auto;
  display: block;
}

.settings h4 {
  font-family: "Rubik", sans-serif;
  font-size: 22px;
  color: #36A2B0;
  float: left;
  margin-right: 15px;
}

.settings hr {
    color: #C4C4C4;
    
    width: 80%;
}

.settings .options {
    float: none;
}

<div class="settings">
  <div class="settings_timer">
      <div class="settings_title">
          <h4>TIMER</h4>
          <div>
              <hr>
         </div>
      </div>

      <div class="options">
          <p>Test</p>
      </div>
  </div>
</div>

【讨论】：

【解决方案3】：

尝试自行关闭标签。写成<hr/>

【讨论】：

HTML中<hr>和<hr />有很大区别吗？
OP 写道 .options div 确实包含在 .settings_title div 中。这两者之间只有一个未封闭的标签。在 XHTML strict 中，hr 标签必须关闭。我不知道 OP 的文档类型是什么。对我来说，这听起来像是上层 div 没有关闭。如果是这样，更改浮动可能在视觉上解决了问题，但他仍然有一个未关闭的 div 标签，因为 hr 没有关闭。
@ChrisHappy 如果您正在使用 XHTML 是的（如 joshstrike 所说），但该文档类型已被弃用（除非有一个我没有听说过的现代用例）。我现在唯一看到它重要的是 HTML 样式指南。我知道如果单个元素没有自动关闭，我喜欢使用的 linter 会抛出错误。