css⽂字两端对齐
1、需求是这样的：⽤div+css实现⼀个表单，要求表单中，输⼊框前⾯的label⽂字都两端对齐，效果如下:
2、先贴出html代码：
<div class="item-box">
<span>姓名：</span>
<el-input v-model="name"></el-input>
</div>
<div class="item-box">
<span>电话号码：</span>
<el-input v-model="phone"></el-input>
</div>
<div class="item-box">
<span>家庭详细住址：</span>
<el-input v-model="addr"></el-input>
</div>
3、实现⽂字两端对齐⽅式1：设置 text-align 和 text-align-last 为 justify，并且加上兼容 ie 的 text-justify 为 distribute-all-lines
.item-box{
display: flex;
align-items: center;
margin-bottom: 10px;
.el-input{
width: 220px;
}
/*⽂字两端对齐⽅式1*/
span{
display: inline-block;
width: 130px;
text-align: justify;
text-justify:distribute-all-lines; // 这⾏必加，兼容ie浏览器
text-align-last: justify;
}
}
4、实现⽂字两端对齐⽅式2：设置 text-align，并且设置伪元素 after或者 before的样式
.item-box{
display: flex;
align-items: baseline;
margin-bottom: 10px;
.el-input{
width: 220px;
}
/*⽂字两端对齐⽅式2*/
span{
display: inline-block;
width: 130px;
text-align: justify;
&:after{  // 这⾥伪元素after 或者伪元素before 都⾏
content: '';
display: inline-block;
width: 100%;
}
}
}
5、需要注意的坑
这个⽂字两端对齐的只针对⽂字，如果你要是写上连续的字母或者数字，那⽤上⾯的 ‘实现⽂字两端对齐⽅式1’ 或者 ‘实现⽂字两端对齐⽅式2’ 是怎么都实现不了⽂字两端对齐的效果的，呈现效果就是下⾯这张图
<div class="item-box">
<span>111：</span>
<el-input v-model="name"></el-input>
</div>
<div class="item-box">
<span>3333：</span>
<el-input v-model="phone"></el-input>
</div>
<div class="item-box">
<span>aafasdfa：</span>
<el-input v-model="addr"></el-input>
</div>
如果想实现，那就连续数字或者连续字母之间加空格，例如：text align center
<div class="item-box">
<span>1 1 1：</span>
<el-input v-model="name"></el-input> </div>
<div class="item-box">
<span>3 3 3 3：</span>
<el-input v-model="phone"></el-input> </div>
<div class="item-box">
<span>a a f a s d f a：</span>
<el-input v-model="addr"></el-input> </div>
整理记录就到这⾥，祝⼤家开⼼

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。