【发布时间】：2016-06-11 03:33:11
【问题描述】：
我正在尝试在我的 Wordpress 页面中添加一个“hr”来分隔我的内容。我的样式如下：
p {
-webkit-font-smoothing: antialiased;
color: #555555;
font-family: Helvetica, 'Helvetica Neue', Arial, 'Lato', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.25em;
padding: 0px;
margin: 0 0 12px 0;
}
h4 {
color: #111111;
font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
font-weight: 900;
line-height: 1.2em;
margin: 0 0 8px 0;
}
hr {
display: block;
width: 100%;
height: 1px;
background: #cccccc;
border: none;
outline: none;
padding: 0px !important;
margin: 26px 0 13px 0 !important;
}
我在 Wordpress 页面中使用的 HTML 如下：
<h4>Make your selection</h4>
<p>
<input type="radio" name="left-or-right" value="left" checked="checked" />
Turn Left<br />
<input type="radio" name="left-or-right" value="right" /> Turn Right</p>
<hr>
我对“hr”的问题是它的 margin-top 26px 并没有将它推离上面的“p”。相反，“hr”和“p”的边距似乎重叠。
到目前为止，我已经能够通过添加以下内容来解决此问题：
.generic-container {
width: 100%;
height: auto;
padding: 0px;
margin: 0px;
display: block;
overflow: hidden;
}
<div class="generic-container">
<h4>Make your selection</h4>
<p>
<input type="radio" name="left-or-right" value="left" checked="checked" />
Turn Left<br />
<input type="radio" name="left-or-right" value="right" /> Turn Right
</p>
</div>
<hr>
好像有点啰嗦
<div class="generic-container">
在页面每个部分的顶部，然后在每个“hr”上方添加“/div”以将其关闭。
我尝试添加“溢出：隐藏；”进入...
p
main.content
.entry-content
...但这似乎不起作用。
谁能给我一些关于如何激活“hr”边距的建议，将其从上面的元素移开？
感谢您的阅读。
在回复@symlink 后添加到下方：
感谢大家的回复。 尽管将“p” margin-bottom 更改为 padding-bottom，但“下面”的代码仍然不起作用（仍在尝试不使用“generic-container”）：
CSS
.width-80pc {
width: 80%;
}
.width-20pc {
width: 20%;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
p.toby-small-text {
color: inherit;
font-weight: inherit;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.25em;
padding-bottom: 5px;
margin: 0px !important;
}
.text-align-left {
text-align: left;
}
HTML
<div class="width-80pc float-left">
<h4>This review is about this service</h4>
<p><input type="radio" name="service" value="one" disabled> Service One</p>
</div>
<div class="width-20pc float-right">
<p class="toby-small-text text-align-left"><a>Service Two</a></p>
</div>
<hr>
在我对@Marc Audet 的回复“评论”后添加如下：
该代码的作用是使 hr 上方的框远离 hr，而不是其下方的框。
根据 Marc 的建议，我创建了这个以使 hr 的 above 和 bebeath 框远离 hr：
CSS
.width-80pc {
width: 80%;
outline: 2px dotted blue;
}
.width-20pc {
width: 20%;
outline: 2px dotted purple;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
p.toby-small-text {
color: inherit;
font-weight: inherit;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1.25em;
margin: 0px !important;
}
.text-align-left {
text-align: left;
}
hr {
clear: both; /* Takes care of you floated elements */
padding-top: 40px;
/* padding-bottom: 20px; This doesn't create space under the hr line */
border: none;
border-bottom: 2px solid red;
height: 0px;
background: transparent;
}
.after-hr {
padding: 0;
margin: 0;
height: 20px;
background: transparent;
}
/* This doesn't seem to work
.after-hr::after {
clear: both;
}
*/
h4, p, p.toby-small-text {
padding: 0 15px 0 15px;
}
HTML
<div class="width-80pc float-left">
<h4>This review is about this service</h4>
<p><input type="radio" name="service" value="one" disabled>Service One</p>
</div>
<div class="width-20pc float-right">
<p class="toby-small-text text-align-left"><a>Service Two</a></p>
</div>
<hr><div class="after-hr"></div>
<div class="width-80pc float-left">
<p>I also need the "hr" to keep away from the boxes underneath it.<br>
By creating ".after-hr" I seem to be able to make some space under it.<br>
I tried to use "hr::after" but it doesn't seem to work.</p>
</div>
如果有人可以建议如何在“hr”下方创建空间而不必在 HTML 中使用“hr”和“after-hr”，我欢迎任何建议。
也许有一些方法可以让“hr::after”完成这项工作。 谢谢
【问题讨论】：
标签： html css overflow margin hidden