css 底部划线_这种APP底部横线+文字该怎么布局?css

JS Bin

.divider {

color: #999;

text-align: center;

}

.divider::before,

.divider::after {

content: '';

display: inline-block;

margin: 0 10px;

width: 100px;

height: 1px;

background: currentColor;

vertical-align: middle;

}

这是一个分割线

上面这个如果考虑移动端宽度问题单位应该用rem，移动端这个应该是共识了。使用flex则可以不考虑宽度问题了，如下面这个：

JS Bin

.divider {

display: flex;

align-items: center;

color: #999;

text-align: center;

white-space: nowrap;

}

.divider::before,

.divider::after {

content: '';

width: 50%;

height: 1px;

background: currentColor;

}

.text {

padding: 0 1em;

background: #fff;

}

这是一个分割线sdfdsfssdfs