HTML / CSS下划线全宽

Question

我试图找出如何在每个行中使下划线/边框全宽，而不在段落中添加
。有没有人有任何想法我应该怎么做？

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

感谢任何帮助，谢谢。

HTML

<p>We are always on the lookout for great talent. Please send in your resume or portfolio to test@test.com. The following positions are open.</p>

CSS

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

Answer 1

如果线条高度固定，您可以使用渐变：

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

http://jsfiddle.net/t2VG4/

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>

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。

Answer 4

我有一个小问题，线条显示为渐变，修复方法是指定从透明到黑色的切换发生在 0.1 像素以上，因此无法检测

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