html5 冒号分隔符对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>冒号对齐</title>
<style>
.parent{display:flex}
.left{width:50%}
.left div{text-align: right;}
</style>
</head>
<body>
<div class='parent'>
<div class="left">
<div>
<span>姓名：</span>
</div>
<div>
<span>性别：</span>
</div>
<div>
<span>年龄：</span>
</div>
<div>
<span>居住地：</span>
</div>
<div>
<span>电话号码：</span>
</div>
</div>
<div class="right">
<div>
<span>张三风</span>
</div>
<div>
<span>男</span>
</div>
<div>
<span>11</span>
</div>
<div>
<span>武当山</span>
</div>
<div>
<span>13900004444</span>
</div>
</div>
</div>
</body>
</html>效果：
相关推荐
Noneyes 2020-11-10
此处省略三千字 2020-07-20
银角大王 2020-06-25
阳历六月 2020-06-14
lishaokang 2020-06-14
小惠 2020-06-05
Norsaa 2020-05-07
baobaozai 2020-04-29
fsfsdfsdw 2020-04-21
taisenki 2020-04-08
fenxinzi 2020-03-01
zhiliang 2020-01-31
PHP学习笔记 2020-01-06
hyfcomeon 2013-06-14
PHP学习笔记 2019-12-31
TesterJingel 2019-12-29
silencehgt 2019-12-27