bootstrap设计横线上加字

1.给横线上加字

2.思路：通过z-index实现，可以将父元素的z-index设置成2，而横线的z-index设置成-1，这样有字的地方就可以覆盖横线，再设置字的padding达到合理的宽度

（1）设置父元素类.text-with-hr的z-index

（2）设置横线的z-index

注意：设置border-bottom 就可以变成一条横线

（3）设计字体合理的padding

可以先给这个字体背景颜色设置green，方便对padding的大小进行调整

设置好之后，将背景颜色换成白色即可

源码：

HTML

<div class="text-with-hr"><span>or</span>
</div>

CSS

.text-with-hr {text-align: center;position: relative;z-index: 2;
}
/*
横线，并通过z-index：-1将or附近的横线遮盖住
*/
.text-with-hr:before {position: absolute;content: '';top: 20px;left: 0px;width: 100%;border-bottom: 1px solid #d4d4d4;z-index: -1;
}
.text-with-hr span {display: inline-block;background: white;padding: 10px;
}

转载于:https://www.cnblogs.com/GumpYan/p/7849939.html

bootstrap设计横线上加字相关推荐

qt 对话框位置如何确定_在图片上加字，如何确定该用什么字体、字体的颜色和放置的位置？...
这是一位读者在后台向我提出的问题.坦白讲,第一次看到这个问题的时候,我觉得这个读者太鸡贼了.为什么这么说呢? 因为这看似是一个问题,倒不如说是3个问题.不过,不得不说,这的确是一个很有价值的好问题. ...
html中怎么在横线中加字_传说中仓颉造字，汉字是怎么演变来的？
传说中仓颉造字,汉字是怎么演变来的? 中华的文字是世界上使用时间最久,人数最多的文字,文字的创造和应用推动了中华文化的发展,传说中最早的汉字是由黄帝时期的仓颉造出来的. 据说上古时代人们都是用结绳来记 ...
html中横线中间加字_干货|学术论文中的“三线表”如何绘制？
SCI最新专题在科研过程中,大家用到最多的可能就是"三线表"."三线表",一般主要由三条横线构成,当然在变量名栏里也可以拆分单元格,出现更多的线.更重要的是, ...
HTMLcss怎样让文字覆盖在图片上面，图片上加字
每个方框的html 如下, html css 如何使图片居中且不变形 css如下,其中需要注意的是,不要设置最外层div的大小,只设置span的大小,让span的大小决定div的大小. 其中 disp ...
在Windows桌面壁纸上加字方法
C:\Windows\Web\Wallpaper 下找到对应图片用画图工具修改,覆盖保存,重启.
计算机画图更改,如何用电脑画图功能修改图片与加字
3.在[写日志]时,左键或右键点击图片在其左上角长方形方块: ①[更换]是添加图片.上传.插入到日志中.②[删除]是取消该图片. ③[排版]是将其居左.居中.居右.居左环绕.居右环绕. ④[链接]是链 ...
zxing换行_为什么我的word里的横线上写完一行字不能自动换行，？
匿名用户 7级 2010-10-21 回答目前,我暂时知道的有:1你在WORD中同时按Ctrl+A时,可以选择整篇文章.2.F1 显示当前程序或者windows的帮助内容. F2 当你选 ...
Latex之给字符上加横线、波浪等
Latex 前几天想在xxx上加波浪号,一时间忘记怎么打,现在记录下来,以后好查阅. 加^号:\hat{x} 加横线:\overline{x} 加宽^:\widehat{x} 加波浪线:\wideti ...
电影票上的字是怎么消失的？
一切探究和追查都来源于我收藏电影票的特殊癖好. 几年前的电影票字迹已经模糊,为了更好的保存票根,让回忆有据可查,根据自以为是的博物学知识,我做了一个最朴素的决定: 把电影票贴上透明胶带"塑封 ...

bootstrap设计横线上加字

bootstrap设计横线上加字相关推荐

最新文章

热门文章