检查元素时元素错误 DIV

Question

正如您从下面的代码中看到的，h4 和 hr 标签应该是 .settings_title 的一部分，但在检查 .options 时，它突出显示了h4 和 hr 标签是它的一部分（见图）。

当把 margin/padding 放到“选项”div 时，它把 margin/padding 放在 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;
}

Answer 1

是因为float: left.

试试 display: inline-block 或者 .settings_title { overflow: hidden }.

总有 .clearfix，但这可能会稍微复杂一些。这里有更多信息：

All about Floats - CSS Tricks
What is a clearfix? - Whosebug

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

Answer 2

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

Answer 3

有几种不同的方法可以做到这一点。我想你希望 <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>

检查元素时元素错误 DIV

Elements in wrong DIV when inspecting element

html

css

css-float