css如何使下划线位置远,使用css调整下划线和文本之间的距离
6 个答案:
答案 0 :(得分:2)
您可以将display: inline-block;添加到
,或者在inline ...span元素(例如h1) >
h1 {
text-align: center;
}
h1 span {
font-size: 24pt;
color: #279839;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
hello
hello world
hello world and univers
答案 1 :(得分:2)
将span标记放在h1中
商品
css
.the-h1 {
text-align: center;
}
.the-span {
display: inline-block;
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
答案 2 :(得分:1)
步骤1:你需要进行H1显示:内联块;这样边框保持根据文本的宽度而不是窗口宽度。
步骤2:为了提供空间,您可以使用css伪元素
h1 {
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
display:inline-block;
position:relative;
margin: 0 0 10px;
}
h1:after {
content:'';
position: absolute;
left:0;
right:0;
bottom:0;
height:1px;
background: #279839;
display: block;
}
答案 3 :(得分:1)
如果您不想通过其他标记对其进行换行,请使用transform将h1标记与页面的center对齐,并将其display更改为{{ 1}}这仅适用于inline-block,
one h1 tag
h1 {
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
display: inline-block; /*Add this*/
left: 50%; /*Add this*/
transform: translate(-50%, 0); /*Add this*/
}
答案 4 :(得分:1)
默认情况下,您的h1标记是一个块元素,因此border-bottom遍历整个宽度是有意义的。您需要更改标题的display属性才能获得希望的结果。
h1 {
display: inline-block; /* most solid one; best choice */
display: initial; /* most safe one can easily be overwritten */
display: inline-flex; /* could be useful if people using flex-grids */
}
答案 5 :(得分:0)
h1 {
display:Block;
width: 25%
position:relative;
margin-right:auto;
margin-left:auto;
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
css如何使下划线位置远,使用css调整下划线和文本之间的距离相关推荐
- css margin-top设置html元素之间的距离
css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...
- vector容器的end是指向最后一个元素的下一个位置,使用时要将迭代器减1,才能获取到最后一个
vector容器的end是指向最后一个元素的下一个位置,使用时要将迭代器减1,才能获取到最后一个 原因: Cont是容器的类型,容器中定义了一个此容器所用的游标(迭代器)的类型,叫iterator,于 ...
- php css下划线,css下划线如何设置?css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
- vue内解决可视化大屏内百度地图在css transform下缩放位置偏移的问题
vue内解决可视化大屏内百度地图在css transform下缩放位置偏移的问题* 最近在写可视化大屏的时候发现使用百度地图,在缩放的缩放的时候视角总是往红色框位置缩放,并不在鼠标位置进行视角缩放,查 ...
- php css下划线,css下划线与文字之间的距离如何设置?
本篇文章给大家介绍一下css下划线和文字间距离的的设置方法,接下来我们来看看具体的内容. 在上一篇文章中我们介绍了关于css下划线的设置方法,但是设置出来的下划线感觉与文字之间距离太近,有时在网页中会 ...
- 标梵互动教你巧妙使用CSS变量使您的CSS更有吸引力
标梵互动教你巧妙使用CSS变量使您的CSS更有吸引力 2020-11-19 私有 「CSS变量」又叫「CSS自定义属性」,为什么会突然提起这个很少人用到的东西呢?因为最近在重构个人官网,不知道为什么突 ...
- css grid随页面大小_你现在可以玩下这 5 个 CSS 新功能
在浏览器开始实现它们之前,CSS 新的功能通常需要经过长时间讨论之后,才在W3联盟的规范中定义.有许多值得一提的 CSS 新功能,但是在本文中,我们重点介绍可以浏览器的稳定版中进行测试的五个功能: C ...
- 什么情况下应该选用远心镜头
镜头中的远心镜头以其独特的性能,目前在机器视觉应用中得到广泛的使用.什么情况下应该选用远心镜头呢? 工业智能相机方案商朗锐智科从远心镜头的原理,应用范围,选型来介绍, 希望让大家对远心镜头有进一步的了 ...
- html+导航栏+点击下划线,html导航栏点击后出现下划线_【Word教程】教你制作输入文字依然对齐的封面下划线......
点击上方"祕技",关注我们 -助你提升工作技能~ 阅读全文大约需10分钟 在学习和生活中,使用word进行封面制作是很常见的应用场景,而下划线又是封面中不可缺少的元素. 很多同学在 ...
最新文章
- Python 自动化运维 pycurl
- tw-wr641g ttl串口
- HTML小知识点积累
- 我的手机 不支持箭头函数
- mysql group by 慢_mysql“group by”查询非常慢
- Oracle数据泵备份与恢复 命令 expdp/impdp 用法详解
- wpf 自定义窗口,最大化时覆盖任务栏解决方案
- 清华博士导师整理:Tensorflow和Pytorch的笔记(包含经典项目实战)
- centos7/RHEL7最小化系统安装gnome图形界面
- 【招聘】阿里2022届春招实习生 - 机器学习/NLP/CV等
- 2022最新手机号码正则
- 网站数据分析指标体系
- 移动支付的方式有哪些拾方易告诉你
- HTML基本结构标签
- CubieBoard7开发板(基于S700芯片)基于安卓系统固件编译
- Nginx 代理minio 共享文件
- 2021年G2电站锅炉司炉最新解析及G2电站锅炉司炉找解析
- 【程序源代码】微信小程序商城,微信小程序微店
- SpringBoot 腾讯企业邮箱
- 【OpenGL】Android 中的 skia 和 OpenGL ES
热门文章
- 加快奔向“国际数字之都” CDEC2023中国数字智能生态大会走进上海
- hadoop中hdfs文件下载
- vue-skeleton-webpack-plugin 骨架屏插件使用
- 艾美捷藻红蛋白RPE化学性质文献参考
- 艾永亮:成为中国版“YouTube”,B站做的不仅是拿下版权
- SaltStack介绍
- 5个月靠体系化自学软件测试“跳进”阿里,从功能测试到自动化...我经历了什么?
- 【OpenCv】图像的数据增强:HSV色彩空间介绍以及与BGR空间的转换
- 游戏控 简要性格分析
- 【Android Audio 入门 七】声卡的创建