HTML/CSS Underline full width

roejwanj  于 2023-08-09  发布在  其他
关注(0)|答案(5)|浏览(101)

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

hs1rzwqc

hs1rzwqc1#

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

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

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

ctehm74n

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>

字符串

zf2sa74q

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

lqfhib0f

lqfhib0f4#

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

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

字符串

zf2sa74q

zf2sa74q5#

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

相关问题