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

  

bootstrap设计横线上加字的更多相关文章

  1. word页码上加横线&&word删除单页页眉

    word(2010)页码上加横线 插入——>页脚(选择年刊型)——>如图 然后拖住“竖条条”将页码拖到正中间——>点中页脚右击——>选中“表格属性”——>“边框和底纹”— ...

  2. bootstrap课程9 bootstrap如何实现动画加载进度条的效果

    bootstrap课程9 bootstrap如何实现动画加载进度条的效果 一.总结 一句话总结:在bootstrap进度条的基础上添加js(定时器),动态的改变进度条即可.很简单的. 1.路径导航是什 ...

  3. 15个最好的Bootstrap设计工具推荐

    摘要:Bootstrap不单单是一个框架,更确切的说,它改变了整个游戏规则.该框架使得许多应用和网站的设计开发变得简便许多,而且它将大量的HTML框架普及成了产品. Bootstrap是由前Twitt ...

  4. ios tableview 上加 textfiled

    ios tableview 上加 textfiled 首先附上我项目中用曾经用到的几张图  并说明一下我的用法: 图1: 图2: 图3: 心在你我说一下  我当初的实现 方法 ,希望能给你们一些  启 ...

  5. 12 款最好的 Bootstrap 设计工具

    作为一位设计师,会经常追寻新鲜有趣的设计工具,这些工具会提高工作的效率,使得工作更有效, 最重要的是使工作变得更方便.非常肯定的说,随着日益增长的工具和应用的数量,设计和开发变得越来越简单了. 其中最 ...

  6. 使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑

    翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑 Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案 ...

  7. 那周余嘉熊掌将得队对男上加男,强人所男、修!咻咻! 团队的Beta产品测试报告

    作业格式 课程名称:软件工程1916|W(福州大学) 作业要求:Beta阶段团队项目互评 团队名称: 那周余嘉熊掌将得队 作业目标:项目互测互评 队员学号 队员姓名 博客地址 备注 221600131 ...

  8. “为了交项目干杯”对“那周余嘉熊掌将得队”、“男上加男,强人所男”的Beta产品测试报告

    "为了交项目干杯"对"那周余嘉熊掌将得队"."男上加男,强人所男"的Beta产品测试报告 格式描述 课程名称:软件工程1916|W(福州大学 ...

  9. 男上加男 BETA冲刺博客汇总

    项目BETA冲刺(团队) --总结 1.团队信息 团队名 :男上加男 成员信息 : 队员学号 队员姓名 个人博客地址 备注 221600427 Alicesft https://www.cnblogs ...

随机推荐

  1. Spring+SpringMVC+Mybatis+Shiro环境搭建之IDEA下搭建Maven项目

    运行IntelliJ IDEA 2016.3.2(64)编译器新建项目   在弹出的窗体中选择maven,然后勾选要建的maven模板--这里选webApp 然后填入相应的maven项目组信息(Gro ...

  2. SSL Labs: Increased Penalty When TLS 1.2 Is Not Supported

    https://community.qualys.com/blogs/securitylabs/2015/05/22/ssl-labs-increased-penalty-when-tls-12-is ...

  3. 解析UML的面向对象分析与设计

    经常听到有朋友抱怨,说学了UML不知该怎么用,或者画了UML却觉得没什么作用.其实,就UML本身来说,它只是一种交流工具,它作为一种标准化交流符号,在OOA&D过程中开发人员间甚至开发人员与客 ...

  4. 【CCPC-Wannafly Winter Camp Day4 (Div1) I】咆咆咆哮(三分+贪心)

    点此看题面 大致题意: 有\(n\)张卡牌,每张卡牌有两种用法:使场上增加一个伤害为\(a_i\)的生物,或使场上所有生物伤害增加\(b_i\).求最大总伤害. 三分 我们可以三分使用\(a_i\)的 ...

  5. bpclntcmd一条神奇的命令,解决新安装nbu客户端无法连接的问题 (屡试不爽神命令)

    1. bpclntcmd案例 bpclntcmd -clear_host_cache bpclntcmd – 测试 NetBackup 系统的功能,并在 NetBackup 客户端上启用光纤传输服务 ...

  6. 导航栏上的item的位置设置

    /** leftItem */ UIButton *leftbtn = [[UIButton alloc]initWithFrame:CGRectMake(, , , )]; [leftbtn set ...

  7. 2017.11.5 Java Web ----案例:数据库访问JavaBean的设计

    (12)案例----数据库访问JavaBean的设计 例题:数据库操作在一个Web应用程序中的后台处理中占有大比重,设计一组JavaBean封装数据库的基本操作供上层模块调用,提高程序的可移植性. [ ...

  8. 一步步做程序优化-讲一个用于OpenACC优化的程序(转载)

    一步步做程序优化[1]讲一个用于OpenACC优化的程序 分析下A,B,C为三个矩阵,A为m*n维,B为n*k维,C为m*k维,用A和B来计算C,计算方法是:C = alpha*A*B + beta* ...

  9. 第15章 RCC—使用HSE/HSI配置时钟—零死角玩转STM32-F429系列

    第15章     RCC—使用HSE/HSI配置时钟 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku. ...

  10. 页面跳转,A跳到B,B再返回A时自动定位到离开A时的位置

    <template> <div class="hello" @scroll="scrollLoad" id="myScrollBox ...