blog
blog copied to clipboard
ly2011
CSS如何实现文字两端对齐
CSS如何实现文字两端对齐
关键
text-align: justifyafter、before伪元素
具体实现
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.row>div:first-of-type {
/* width: 500px; */
height: 50px;
line-height: 50px;
font-size: 12px;
border: 1px solid red;
text-align: justify;
}
.row>div:first-of-type:after {
content: " ";
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4 col-lg-4">姓名</div>
<div class="col-md-8 col-xs-8 col-sm-8 col-lg-8"></div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4 col-lg-4">手机号码</div>
<div class="col-md-8 col-xs-8 col-sm-8 col-lg-8"></div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4 col-lg-4">验证码</div>
<div class="col-md-8 col-xs-8 col-sm-8 col-lg-8"></div>
</div>
<div class="row">
<div class="col-md-4 col-xs-4 col-sm-4 col-lg-4">密码</div>
<div class="col-md-8 col-xs-8 col-sm-8 col-lg-8"></div>
</div>
</div>
</body>
</html>
参考
- https://segmentfault.com/a/1190000011336392
- https://zhuanlan.zhihu.com/p/53428937
