html - 在段落的整个宽度下划线(即使文本没有一直延伸)

Question

我正在尝试在线创建食谱卡的外观:

因此，我试图让下划线覆盖段落的整个宽度，即使文本没有。现在，我正在尝试使用文本装饰:下划线，但它只延伸到文本:

HTML:

<div>
  <p>Lorem ipsum...</p>
</div>

CSS:

p {
    border-bottom: 1px solid #000;
    display: inline;
    width: 200px;
}
div {
    width: 400px;
}

JSFIDDLE:http://jsfiddle.net/FYNAM/1/

有什么建议吗？

Answer 1

愚蠢的解决方案，但如果您的行高在所有

中都相同(没有具有不同行高的嵌套元素)，您可以使用背景图片。