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

如图所示

下面是我做的，但是宽度不好控制，设备宽度不一样显示也不一样，有好的解决方案嘛

用户须知

.state{

color: #666;

font-size: 14px;

}

.line{

width: 35%;

height: 1px;

background-color: #dedede;

}```

回答

用户登录

.box{

width:80%;

margin:50px auto;

color:#ccc;

display: flex;

align-items: center;

}

.text{

padding:0 5px;

}

.line{

border:1px solid #ccc;

flex-grow: 1;

}

内容

.line {

font-size: 14px;

position: relative;

}

.line:after {

content: "";

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 100%;

height: 1px;

background: red;

}

.line span {

padding: 0 10px;

position: relative;

z-index: 1;

background: #fff;

}

用户须知

.state{

display: block;

height: 1px;

width: 100%;

margin: 24px 0;

background-color: #dcdfe6;

position: relative;

}

.text{

background: #fff;

margin: 0;

position: absolute;

background-color: #fff;

padding: 0 20px;

font-weight: 500;

color: #303133;

font-size: 14px;

left: 50%;

transform: translateX(-50%) translateY(-50%);

}

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: '';

top: 50%;

width: 50%;

height: 1px;

background: currentColor;

}

.text {

padding: 0 1em;

background: #fff;

}

这是一个分割线sdfdsfssdfs

用户须知