下划线段落的全宽（即使文本没有一直延伸）

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

将以下内容添加到您的css中：

div { display: block; width: 100%; }
div > p { display: block; width: 100%; }

或者，您也可以尝试：

div { width: 100%; }
div > p { display: block; }
*remove width from 'p'

它应该可以解决您的问题。

Answer 2

愚蠢的解决方案，但是如果您的行高在所有＆lt; p＆gt;中相同（没有具有不同行高的嵌套元素）您可以使用背景图像。

Answer 3

您可以通过修改p标签后发生的事情来解决此问题，如下所示

p:after {
    content:  " ______________________________________________";
}

这是一个快速而肮脏的解决方案，但我认为你应该足够聪明，可以从这里拿走它;）

祝你好运..还有很棒的问题！你有我的投票

DEMO

Answer 4

.rtv {
  position: relative;
}

.abs {
  position: absolute;
}

.full-underline {
  width: 100%;
}

.full-underline span {
  display: block;
  width: 100%;
  height: 20px;
  border-bottom: 0.8px solid black;
}

<div class="content tl m20 rtv">
  <div class="full-underline abs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>

  <h3>NAMA PEKERJAAN :</h3>
  <h1>PEKERJAAN EMERGENCY PEMBERSIHAN BENDA ASING DI TOWER 07 SECTION NGENA-TUBAN</h1>
</div>

enter image description here

可以根据文字大小调整跨度高度