如何在HTML文本的顶部放置一行？

问题描述：

所以我想尝试在HTML和CSS中做到这一点，但我似乎无法找到任何东西。我唯一能想到的方式就是将文本作为图像导入，但看起来很糟糕。 PS浅蓝色线是中心为我设计在Photoshop网站第一如何在HTML文本的顶部放置一行？

<p class="test"> 
Conact Me 
</p> 

.test { 
border-top-style: solid; 
border-bottom-style: solid; 
border-bottom-width: 1px; 
}

提供您的代码，请 –

你尝试过这么远吗？ – lexith

只是在文本顶部放一个边框 – Reeno

答

尝试使用边框来实现的查找你想要：

a.my-class { 
    display: inline-block; 
    padding: 5px 15px; 
    border-top: 2px solid #000; 
    border-bottom: 2px solid #000; 
    line-height: 1em; 
    text-decoration: none; 
}

答

您可以使用边框顶部的CSS在文本上方创建一行。

.mytextbox { 
    border-top: 1px solid #ff0000; 
}

border-top property

Example of use

我试过了，但是如何让宽度变小 – Cmi

试试'display：inline-block;'。这将使宽度与文本一样长。 – andreas

之后，您可以调整填充左侧和填充右侧的属性，使其以您想要的方式得到。 –

答

一个简单的解决方案是使用text-decoration: underline overline;。

p { 
 
    text-decoration: overline underline; 
 
}

<p> 
 
CONTACT ME 
 
</p>

会有反应吗？还是我必须添加额外的东西才能使其响应？（网络开发新手） – Cmi

@Cmi你是什么意思的响应？ – Gendarme

就像它在不同的设备屏幕上 – Cmi

答

那么，你会希望有一个div内的文本元素，被设置在div到你要去的颜色的背景色属性，然后设置页边距文本元素将文本推下〜10px左右（看起来像是在你的模拟中的位置）。从那里你可以设置一个边框只有顶部，底部和样式相应。

答

您可以将文本放在块级元素中并应用top and bottom border。针对text-decoration: underline overline;的这种方法的优点是，您可以根据需要在padding之间简单地定义文本和行之间的空格。

要使宽度与文字一样长，只需使用display: inline-block;即可。

body { 
 
    background: #5cc8f6; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    padding: .5em; 
 
    border-top: 1px solid white; 
 
    border-bottom: 1px solid white; 
 
    color: white; 
 
    text-transform: uppercase; 
 
    font-family: Verdana; 
 
    font-size: 2em; 
 
}

<div>Contact me</div>

如何在HTML文本的顶部放置一行？

相关推荐