从下面的代码中可以看到,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>
答案 0 :(得分:2)
这是因为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>
答案 1 :(得分:1)
有几种不同的方法可以执行此操作。我在想您是否希望<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>
答案 2 :(得分:-1)
尝试自动关闭标签。将其写为<hr/>