Question

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

在将“ margin / padding”放置到“ options” div时，它会将margin / padding放置在hr和h4标记之上，如果它位于段落标记之上。

HTML：

hr

CSS：

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

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

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

Answer 2

有几种不同的方法可以执行此操作。我在想您是否希望<hr>在中间垂直对齐？就像您可以使用带边框的：after一样。

但要回答您的问题是

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

这以前称为float的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>

Answer 3

尝试自动关闭标签。将其写为<hr/>

检查元素时DIV中的元素错误

3 个答案: