HTML/CSS 下划线全宽

Question

我正在努力找出如何使每行的下划线/边框变成全宽，而不需要在段落中添加
。有没有人有任何想法我该如何解决？

到目前为止，我有两个解决方案，一个是添加
或创建它的图像，但这都不是理想情况。

感谢任何帮助，谢谢。 HTML

<p>We are always on the lookout for great talent. Please send in your resume or portfolio to [e-mail]. The following positions are open.</p>

CSS

p {
    border-top: thin soild #000;
}

- ttran4040

---

请添加一些代码或更好地解释您的情况，我无法理解您的问题。 - Victor York

我只是希望模仿具有下划线/边框的图像。 - ttran4040

可能是 div 还是它所在的项目？ - BuddhistBeast

现在我正在尝试不为了响应式和整洁而使每行成为单独的div。 - ttran4040

Answer 1

如果行高是固定的，你可以使用渐变实现：

p{
  line-height: 20px;
  color: #333;
  background-image: 
    repeating-linear-gradient(180deg, transparent, transparent 19px, #333 20px);
}

http://jsfiddle.net/t2VG4/

- nice ass

---

你能看一下这个链接并帮我修复每行下面的渐变问题吗？http://jsfiddle.net/t2VG4/ - ttran4040

它们不是实心黑线。我需要所有的线都是实心的。 - ttran4040

你的意思是要匹配字体的宽度，就像这个一样吗？只需调整颜色停止位置，直到你得到正确的大小和位置即可。 - nice ass

Answer 2

只需将文本放入 span 元素中。

http://jsfiddle.net/nukec/3bUFC/

<span style="border-bottom: 1px solid red">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </span>

- sensei

---

这很接近，但我想确保每行都达到完整的宽度。请看图片。 - ttran4040

Answer 3

在 CSS 中，解决方案是设置 line-height（这里是 30px），然后调整 repeating-linear-gradient 上的停止位置以与文本对齐（29px 和 30px）：

p {
    line-height:30px;
    background-image: repeating-linear-gradient(180deg, transparent, transparent 29px, grey 30px);
    border-top:1px solid grey;
}

然而，请记住，每个浏览器引擎的渐变生成器都是为了平滑的颜色过渡而构建的，而不是像素清晰的边缘，所以你的结果可能会有所不同。最好的解决方案可能是创建一个平铺图像（带有透明度和水平线），并将其用作background-image。

- PMG

Answer 4

绝对不是，必须是完全空白的下划线全页宽度。

TBNK

- OldManRiver

Answer 5

我遇到了一个小问题，就是线条呈现为渐变的形式，解决方法是指定从透明到黑色的切换在0.1像素内完成，这样就不会被察觉到。

p {line-height: 27px;
    color: #333;
    background-image: repeating-linear-gradient(180deg
, transparent, transparent 24px, #333 24.1px, #333 25.1px);
}

- N Kuria