纯css实现一个横向step步骤条

作者 likaiqiang 日期 2017-04-12
纯css实现一个横向step步骤条

一个纯css实现的横向step步骤条

最终效果类似这样

记得n久以前自己写了一个,奈何源码找不到了,没办法,再写一个呗

其实这种效果用flex布局最好实现了,考虑到flex在pc上的兼容性只能另辟捷径。

使用table-cell

如果这种效果使用flex布局来实现,我们主要使用flex布局中子元素可以等分的特性,在pc上,这种效果可以用table-cell来模拟。

table-cell的兼容性

不兼容IE6、7,不过对于使用vue的我来说,这种缺点可以忽略不计了。

table-cell再配合伪元素实现简直完美。

使用flex

思路上和table-cell是一样的,不熟悉table-cell的同行可以用这个缓冲一下。