Question

无论如何都有文字，然后是

<hr>

其中

<hr>

直接在文本下面，文本和行之间没有任何垂直空间？

Answer 1

<styles>
  hr{
    padding: 0px;
    margin: 0px;    
  }
</styles>

Answer 2

是。只需用css转移它。例如：

<p>text goes here</p>
<hr style='margin-top:-1em' />

它们之间没有垂直空间

Answer 3

有时候我使用了一个零高度的边框div来提供这种更细粒度的格式控制;或显示与直线＆lt; hr＆gt;具有不同外观的水平线。

Answer 4

众所周知，

hr很难在浏览器中一致地设置样式，因为它们使用不同的属性color，background-color，border等来构成它们的部分，

然而，如果它只是IE8的支持，那么你就是see this example

除了厨房水槽以外的所有东西，~~仍然在IE7中不起作用~~

这也使它在IE7中工作：

hr {margin: -7px 0 !ie7;}

我的方法一直是做以下事情（警告它是yukky但确实提供了很多造型机会！）：

<div class="hr"><hr></div>

应用于div.hr {styles}和.hr hr {display: none;}

所需的任何样式

这意味着实际的hr仍将在非CSS /文本浏览器中显示，我仍然可以使用图像或边框设置实际div的样式，而无需记住厨房接收器方法在上面链接的JSFiddle示例中;）YMMV虽然..

Answer 5

Here是hr-Elements的css的几个例子，也是第八个例子，它解释了如何在一行中间写文本而不会在它之前和之后中断。这是代码：

HTML：

<!-- Glyph, by Harry Roberts -->
<hr class="style-eight">

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;}

无论如何在文本下面没有垂直空间的<hr />

5 个答案: