我正在尝试添加＆＃34; hr＆＃34;在我的Wordpress页面中展开我的内容。我的样式如下：
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>
我的问题＆＃34; hr＆＃34;这是它的优势26px并没有让它远离＆＃34; p＆＃34;以上。取而代之的是＆＃34; hr＆＃34;和＆＃34; p＆＃34;似乎重叠。
到目前为止，我已经能够通过添加以下内容来解决此问题：
.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">
在页面每个部分的顶部，然后添加＆＃34; / div＆＃34;将它关闭在每个＆＃34; hr＆＃34;。
之上我尝试添加＆＃34;溢出：隐藏;＆＃34;进入......
p
main.content
.entry-content
......但这似乎不起作用。
请有人能就如何制作＆＃34; hr＆＃34;保证金激活，将其从其上方的元素移开？
感谢您的阅读。
在回复@symlink之后添加以下内容：
谢谢大家的回复。 尽管改变了＆＃34; p＆＃34; margin-bottom to padding-bottom，此代码＆＃39; under＆＃39;仍然没有工作（仍在尝试没有＆＃34;通用容器＆＃34;）：
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>
在我的回复后添加以下内容＆＃39;评论＆＃39;致@Marc Audet：
该代码的工作原理是将盒子保持在远离hr的小时，而不是下方的盒子。
根据Marc的建议，我创建了这个以保持 上方
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>
如果有人可以建议如何在＆＃34; hr＆＃34;无需使用＆＃34; hr＆＃34;与＆＃34; after-hr＆＃34;在HTML中，我欢迎任何建议。
也许某种方式来获得＆＃34; hr :: after＆＃34;做这份工作。 感谢
答案 0 :(得分：1)
这是另一种基于您的代码片段的方法，它具有浮动元素。
在hr元素上，您可以添加clear: both，以便hr元素位于所有浮动元素下方。
要处理水平线规则顶部的垂直空白， 确保边框设置为仅显示底部（或顶部），并在顶部添加一些填充以控制分离。
如果要控制hr元素后的间距，可以调整margin-bottom，如下所示。这看起来效果很好。
我在Firefox中对此进行了测试，应该可以在其他浏览器中使用。
.width-80pc {
width: 80%;
outline: 1px dotted blue;
}
.width-20pc {
width: 20%;
outline: 1px dotted blue;
}
.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;
}
hr {
clear: both; /* takes care of you floated elements */
padding-top: 20px;
margin-bottom: 20px;
border: none;
border-bottom: 2px solid red;
}
p.extra {
border: 1px dotted blue;
margin: 0;
}<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>
<p class="extra">Some more text.</p>
答案 1 :(得分：0)
这听起来像collapsing margins issue。您可以使用padding而不是p来修复此问题。
答案 2 :(得分：0)
您是否尝试过查看其他浏览器？我正在使用Chrome，说实话它看起来很好（第一点，在添加通用容器之前），它显示在段落下面，我没有看到任何重叠。 （我无法添加图片，但遗憾地告诉你）。
答案 3 :(得分：0)
添加generic-container div并不是啰嗦。您应用overflow:hidden时发生的情况是强迫generic-containter建立新的块格式化上下文根。这样做有几件事，其中之一就是确保div中的边距包含在div中。好消息是，除了overflow:hidden之外，您不需要添加到容器div中的任何CSS。
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;
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 {
height: 1px;
background: #cccccc;
border: none;
outline: none;
margin: 26px 0 13px 0;
}
.generic-container {
background:lightblue;
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>
在此处阅读有关块格式化上下文的更多信息：
http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/