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标签的末端有一条水平线，宽度分别为100％。这可能吗？谢谢你的回答。

Answer 1

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

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

最强大的解决方案是使用渐变来执行此操作，但这限制了浏览器支持，因此在采用此方法之前，请确保检查所需的支持：

方法1：

删除范围，您只需要<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>

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

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/

方法2：

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

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

为什么方法1更好？

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

我希望有所帮助！

Answer 2

将float:left;和width:100%添加到.lined中，如下所示：

.lined {
    float:left;
    width:100%;
    border-top: 1px solid #333;
    padding-top: 0.15em;
    padding-bottom: 0.15em;
}

你也可以只用p标签设置float:left; clear:both; border-top...

来做到这一点

我希望这有帮助。

多段之间的水平线（CSS）

2 个答案:

方法1：

请参阅此处的完整示例：

方法2：

为什么方法1更好？