Html 无论如何在没有垂直空间的文本下有一个 <hr>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5605306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
is there anyway to have an <hr> under text with no vertical space
提问by leora
is there anyway to have text and then a
反正有文字，然后
<hr>
where the
哪里
<hr>
line is directly under the text and doesn't have any vertical space in between the text and the line?
行直接在文本下方并且文本和行之间没有任何垂直空间？
回答by fl00r
<styles>
hr{
padding: 0px;
margin: 0px;
}
</styles>
回答by Benubird
Yes. Just shift it with css. Example:
是的。只需用 css 移动它。例子：
<p>text goes here</p>
<hr style='margin-top:-1em' />
This will have no vertical space between them
这将在它们之间没有垂直空间
回答by Pete Wilson
Sometimes I've used a zero-height bordered div to give this finer-grained formatting control; or to show a horizontal rule that has a different appearance from a straight <hr>.
有时我使用零高度边框的 div 来提供这种更细粒度的格式控制；或显示与直线 <hr> 外观不同的水平线。
回答by clairesuzy
hr's are/were notoriously difficult to style consistently across browsers as they use different properties, color, background-color, borderetc. to constitute their parts,
hr众所周知，很难在浏览器中保持一致的样式，因为它们使用不同的属性color、background-color、border等来构成它们的部分，
however if it's just IE8 support you're after then see this example
但是，如果它只是 IE8 支持，那么请查看此示例
that has everything but the kitchen sink thrown at it, and still it doesn't work in IE7
除了厨房水槽之外什么都有，但它仍然无法在 IE7 中工作
this makes it work in IE7 too :
这也使它在 IE7 中工作：
hr {margin: -7px 0 !ie7;}
my method has always been to do the following (warning it's yukky but does provide a lot of styling opportunities!):
我的方法一直是执行以下操作（警告它很恶心，但确实提供了很多造型机会！）：
<div class="hr"><hr></div>
with whatever styles needed applied to div.hr {styles}and .hr hr {display: none;}
将所需的任何样式应用于div.hr {styles}和.hr hr {display: none;}
this means the actual hrwill still show in non-CSS/Text browsers, and I can still style the actual div with images or borders without having to remember the kitchen sinkmethod in the JSFiddle example linked above ;) YMMV though..
这意味着实际hr内容仍将显示在非 CSS/文本浏览器中，我仍然可以使用图像或边框设置实际 div 的样式，而无需记住上面链接的 JSFiddle 示例中的厨房水槽方法;) YMMV 虽然..
回答by Emma
Hereare a few examples of css for hr-Elements and also as the eighth example the solution of how to write text in the middle of a line without a break before and after it. This is the code:
这里有几个 hr-Elements 的 css 例子，还有第八个例子是如何在一行中间写文本的解决方案，前后不中断。这是代码：
HTML:
HTML：
<!-- Glyph, by Harry Roberts -->
<hr class="style-eight">
CSS:
CSS：
hr.style-eight {
margin: 0 auto 24px;
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center; }
hr.style-eight:after {
content: "§";
display: inline-block;
position: relative;
top: -0.97em;
font-size: 1.5em;
padding: 0.25em;
background: white;}
