如何使标题的三个背景线包含两个单独的块？
汁液
首先，这是我的目标
我使用Stack Overflow做到了这一点。
我该怎么做才能在新闻和类型之间划清界限？为什么我虽然使用了标签，但新闻和类型为什么会合而为一<span>？
.news_title h3{
overflow: hidden;
text-align: center;
}
.news_title h3:before,
h3:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
.news_title h3:before{
right: 0.5em;
margin-left: -50%;
}
.news_title h3:after{
left: 0.5em;
margin-right: -50%;
}<div class="news_title">
<h3><span>NEWS</span></h3>
<span>Types</span> 锡尔海克
这是结果https://jsfiddle.net/yhn5pfkm/
您必须将两个标签都包装到一个div中，才能在两个标签之前和之后添加一行。而且您必须h3 display: inline避免移动Types到下一行。
的CSS
.news_title > div{
overflow: hidden;
text-align: center;
}
.news_title > div:before,
.news_title > div:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
.news_title > div:before{
right: 0.5em;
margin-left: -50%;
}
.news_title > div:after{
left: 0.5em;
margin-right: -50%;
}
.news_title > div > h3{
display: inline;
}
html
<div class="news_title">
<div>
<h3><span>NEWS</span></h3>
<span>Types</span>
</div>
</div>
如果您还需要在新闻和类型之间添加界线，请添加以下CSS：
.news_title h3:after{
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 10px;
margin-left: 5px;
box-sizing: border-box;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何为由三个子组组成的两个独立组的图例添加标题？
- 2
比较三个对角线数组，找出最相似的两个
- 3
函数返回一个包含两个反向副本而不是三个的列表
- 4
如何使用第三个表连接没有公用列的两个SQL表，该表包含两个表的列
- 5
三个js混合两个背景图片
- 6
Lodash适用于两个对象，但如果包含三个对象，则返回null
- 7
需要JavaScript或jquery包含两个单词的逗号分隔的三个单词
- 8
如果我希望两个或三个或四个不同的段落都是单独的颜色怎么办？
- 9
如何用CSS或JS连接两个背景块？
- 10
SQL两个计数与三个表
- 11
'if not ' 不适用于两个或三个 'and'
- 12
是否有一个QPair类，但包含三个以上的项目，而不是两个？
- 13
如何使用正确的列标题并排显示来自同一个表的三个单独列的联合
- 14
如何从三个节点中获取最低的两个节点
- 15
如何使用键值从两个对象创建第三个对象
- 16
如何绘制三个变量的两个函数的交点？
- 17
在Android中完成两个线程时如何运行第三个线程
- 18
如何使用三个点和两个向量计算平面方程？
- 19
如何比较两个Excel文件并使用Python编写第三个文件？
- 20
在Android中完成两个线程时如何运行第三个线程
- 21
如何从两个DataGridViews中获取数据到第三个DataGridView中？
- 22
如何连接两个表并按第三个表排序？
- 23
如何从两个相关表中获取数据并放入第三个表
- 24
如何使用两个或三个 SetOnClickListener 修复我的列表视图
- 25
如何将两个活动的两个数字相加并输出到第三个活动
- 26
如何提取三个主要手掌线
- 27
如何在两个单独的模块中包含一个组件？
- 28
Prolog：如何实现三个中最大的两个数的平方和？
- 29
在Angular中，如何遍历两个数组以填充第三个数组？
我来说两句