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

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

如图所示

下面是我做的,但是宽度不好控制,设备宽度不一样显示也不一样,有好的解决方案嘛
这种APP底部横线+文字该怎么布局?css

<div class="state flex flex-y flex-x">

<span class="line"></span>

<p>用户须知</p>

<span class="line"></span>

</div>

.state{

color: #666;

font-size: 14px;

}

.line{

width: 35%;

height: 1px;

background-color: #dedede;

}```

回答

<div class="box">

<div class="line"></div>

<div class="text">用户登录</div>

<div class="line"></div>

</div>

.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;

}

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

<div class="line">

<span>内容</span>

</div>

.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;

}

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

<div class="state">

<div class="text">用户须知</div>

</div>

css">.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%);

}

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<title>JS Bin</title>

<style>

.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;

}

</style>

</head>

<body>

<div class="divider">这是一个分割线</div>

</body>

</html>

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<title>JS Bin</title>

<style>

.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;

}

</style>

</head>

<body>

<div class="divider"><span class="text">这是一个分割线sdfdsfssdfs</span></div>

</body>

</html>

<div style="padding-left: 10px; padding-right: 10px;position:relative;">

<div style="background-color: #666; height: 1px;"></div>

<label style="font-size: 14px; color: #666; background-color: #fff; padding: 0 10px; height:20px; position:absolute; margin-left: 50%; left: -40px; top: -10px">用户须知</label>

</div>

以上是 这种APP底部横线+文字该怎么布局?css 的全部内容, 来源链接: utcz.com/a/62560.html

回到顶部