css - 多个段落之间的水平线(CSS)

Question

我有一个 CSS 问题，顶部边框/多个段落之间有一条水平线。这是我的代码...

HTML:

<p>
<span class="lined">Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
dolores et ea rebum.</span>
</p>

CSS:

p {
    font-family: "jubilat", sans-serif;
    font-weight: 200;
    font-size: 1.7em;
    line-height: 1.7em;
    padding-bottom: 1.5em;      
}

.lined {
    border-top: 1px solid #333;
    padding-top: 0.15em;
    padding-bottom: 0.15em;
}

目前每个段落之间有一条水平线，但直到单词结束。我希望有一条水平线分别到 p-tag 的末尾，宽度为 100%。这可能吗？感谢您的回答。

Answer 1

这实际上比您最初想象的要难得多。让边框跨多行的唯一方法是将该元素设置为 display: inline。 (默认情况下 span 元素)。但是，如果内联元素的内容不够大，它永远不会填满其容器的整个宽度，这就是为什么您会看到边框与文本同时结束的原因。

有一些解决方案，尽管它们并不是最好的。最好的解决方案依赖于元素的背景。

最稳健的解决方案是使用渐变来实现这一点，但浏览器支持有限，因此在采用此方法之前，请务必检查您需要哪种支持:

方法一:

删除跨度，你只需要一个<p>这个标签:

<p>Lorem ipsum dolor sit amet, 
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
dolores et ea rebum.</p>

然后，您需要创建一个渐变，产生一条 1 像素的实线，水平重复，然后是一个跨越其余线高的透明部分。你可以这样做:

background: linear-gradient(180deg, #000 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%);
background-size: 100% 1.7em;

* 不要忘记添加适当的供应商前缀渐变声明以实现跨浏览器兼容性(请参阅下面我的完整示例代码)

---

请注意，我将渐变设置为 1px 为黑色，其余部分为透明。

然后，我使用了background-size将渐变设置为全宽，高度与文本的行高 (1.7em) 相匹配。

因为默认情况下背景重复，它会每 1.7em 产生一个新行，与您的文本对齐。

在此处查看完整示例:

http://jsfiddle.net/M7nYe/1/

方法二:

如果浏览器支持对您的用例很重要，您可以使用此方法作为替代方法。

使用与方法 1 中相同的想法，但不使用渐变，而是创建一个大小为适当行高的图像，顶部为实心像素，背景为透明，然后将其设置为元素的background-image .两种方法都使用相同的技术，但一种方法使用渐变来再现图像。

为什么方法 1 更好？

如果您决定更改字体大小或文本的行高，则需要调整此背景以匹配..使用方法 2，这将需要每次都保存一个新图像，但方法 1 允许您只需稍微编辑一下您的 CSS 即可更改大小、颜色或您想要自定义的任何其他方面。

希望对您有所帮助!