HTML/CSS Underline full width

roejwanj 于 2023-08-09 发布在其他

关注(0)|答案(5)|浏览(102)

x1c 0d1x我试图弄清楚如何使下划线/边框为每行全宽，而不添加
在段落中。有没有人知道我该怎么做？
到目前为止，我有两种解决方案，一种是添加，另一种是创建它的图像，但这并不是理想的情况。
任何帮助都很感激，谢谢。

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;
}

型

css

来源：https://stackoverflow.com/questions/20916586/html-css-underline-full-width

5条答案

按热度按时间

hs1rzwqc1#

如果线的高度是固定的，你可以用渐变来做：

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

字符串
http://jsfiddle.net/t2VG4/

赞(0）回复(0）举报 2023-08-09

ctehm74n2#

只需将文本放入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>

字符串

赞(0）回复(0）举报 2023-08-09

zf2sa74q3#

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。

赞(0）回复(0）举报 2023-08-09

lqfhib0f4#

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

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

字符串

赞(0）回复(0）举报 2023-08-09

zf2sa74q5#

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

赞(0）回复(0）举报 2023-08-09