主要使用： text-align-last: justify;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>对齐</title>
<style>
body, html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
display: inline-block;
width: 1400px;
display: flex;
}
.box {
width: 700px;
display: inline-block;
text-align-last: justify;
display: flex;
border: 1px solid #999;
}
.box_1 {
display: inline-block;
width: 90px;
margin-right: 32px;
}
.box_2 {
display: inline-block;
width: 500px;
}
</style>
</head>
<body>
<!--输入框中只可以输入正数小数和0-->
<input type="text" placeholder="入正数小数和0" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')"/>
<!--只可以输入正整数和0-->
<input type="text" placeholder="正整数和0" onKeyUp="value=value.replace(/\D/g,'')"/>
<!--只可以输入中文-->
<input type="text" placeholder="中文" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">
<!--只可以输入英文-->
<input type="text" placeholder="英文" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')">
<!--开头不出现空格-->
<input type="text" oninput="this.value = this.value.trim()" placeholder="不出现空格">
<!--可以输入正数，负数 小数-->
<input type="text" placeholder='数字' onkeyup="this.value=this.value.replace(/[^\-?\d.]/g,'')"/>
<!--英文和数字-->
<input type="text" name="username" placeholder="英文和数字" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"/>
<div style="height: 50px;background-color: #2c3e50">
</div>
<section>
<div class="box">
<div class="box_1"><label :for="#">姓名</label>:</div>
<div class="box_2">
你好
</div>
</div>
<div class="box">
<div class="box_1"><label :for="#">姓名</label>:</div>
<div class="box_2">
姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名
</div>
</div>
</section>
<section>
<div class="box">
<div class="box_1"><label :for="#">工作单位</label>:</div>
<div class="box_2">
姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名
</div>
</div>
<div class="box">
<div class="box_1"><label :for="#">姓行名</label>:</div>
<div class="box_2">
姓名姓名姓名姓名姓名姓名姓名姓名姓名
</div>
</div>
</section>
</body>
</html>
<script>
function a() {
b();
console.log('我是a1')
function b() {
c();
console.log('我是b1')
function c() {
d();
console.log('我是c1')
function d() {
console.log('我是d')
}
}
}
console.log('我是a2')
}
a();
</script>
