如何在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;
}
答
尝试使用边框来实现的查找你想要:
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;
}
答
那么,你会希望有一个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>
提供您的代码,请 –
你尝试过这么远吗? – lexith
只是在文本顶部放一个边框 – Reeno