CSS实现自适应分隔线的方法

这篇文章给大家分享的是有关CSS实现自适应分隔线的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

CSS如何实现自适应分隔线?下面CSS栏目就来给大家介绍一下CSS实现自适应分隔线的N种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

分割线是网页中比较常见的一类设计了,比如说知乎的更多回答

这里的自适应是指两边的横线会随着文字的个数和父级的宽度自适应

偷偷的看了一下知乎的实现,很显然是用一块白色背景覆盖的,加一点背景就露馅了

心想:可能别人的重点不在这些上面吧

下面列举几种更好的实现方式,不会露馅的那种

1。伪元素+变换:translateX (-100%);

主要原理是设置文本居中<代码> text-align:中心;> 水平居中强的,设置足够的宽度,然后把左边的往左位移<代码> 100%就可以了,父级记得超出隐藏。

具体实现如下

<代码> html 结构为

& lt; div类=皌itle"在我是分割线& lt;/div>

<代码> CSS代码样式为

.title { 　　位置:相对; 　　text-align:中心; 　　溢出:隐藏; 　　字体大小:14 px; 　　颜色:# 999; 　　} 　　{后.title:之前,.title:: 　　内容:& # 39;& # 39;; 　　显示:inline-block; 　　宽度:100%; 　　身高:1 px; 　　位置:绝对的; 　　背景:# ccc; 　　上图:50%; 　　} 　　{前.title:: 　　margin-left: -10 px; 　　变换:translateX (-100%); 　　} 　　{后.title:: 　　margin-left: 10 px; 　　}

CSS分隔线(伪元素+变换)

2。伪元素+ flex

这个比较好理解了,设置<代码>显示:flex代码>

具体实现如下

<代码> html 结构为

& lt; div类=皌itle"在我是分割线& lt;/div>

<代码> css代码样式为

.title { 　　显示:flex; 　　对齐项目:中心; 　　字体大小:14 px; 　　颜色:# 999; 　　} 　　{后.title:之前,.title:: 　　内容:& # 39;& # 39;; 　　flex: 1; 　　身高:1 px; 　　背景:# ccc; 　　} 　　{前.title:: 　　margin-right: 10 px; 　　} 　　{后.title:: 　　margin-left: 10 px; 　　}

CSS分隔线(伪元素+ flex)

3。伪元素+不必/大纲+ clip-path

同样利用<代码> text-align:中心> 不必> 大纲> clip-path> 夹>

具体实现如下

<代码> html 结构为

& lt; div类=皌itle"在我是分割线& lt;/div>

<代码> css代码样式为

.title { 　　text-align:中心; 　　字体大小:14 px; 　　颜色:# 999; 　　溢出:隐藏; 　　} 　　{后.title:之前,.title:: 　　内容:& # 39;& # 39;; 　　显示:inline-block; 　　宽度:0; 　　身高:1 px; 　　不必:0 0 0 9999 px # ccc; 　　vertical-align:中间; 　　} 　　{前.title:: 　　margin-right: 10 px; 　　clip-path:多边形(0 0,-9999 px 0, -9999 px 100%, 0 100%); 　　} 　　{后.title:: 　　margin-left: 10 px; 　　clip-path:多边形(0 0,9999 px 0, 9999 px 100%, 0 100%); 　　}

CSS分隔线(伪元素+不必/大纲+ clip-path)

4。伪元素+右:100%

这个实现需要多一层标签,外部仍然是<代码> text-align:中心>

具体实现如下

<代码> html 结构为

& lt; div类=皌itle"比; 　　& lt;跨类=癷nner"在我是分割线& lt;/span> 　　& lt;/div>

<代码> css代码样式为

.title { 　　text-align:中心; 　　字体大小:14 px; 　　颜色:# 999; 　　溢出:隐藏; 　　} 　　在{ 　　位置:相对; 　　} 　　在::{之前、在:之后 　　位置:绝对的; 　　内容:& # 39;& # 39;; 　　宽度:9999 px; 　　身高:1 px; 　　背景:# ccc; 　　上图:50%; 　　} 　　{之前。:: 　　右:100%; 　　margin-right: 10 px; 　　} 　　{后。:: 　　margin-left: 10 px; 　　}

CSS实现自适应分隔线的方法