微信小程序—-CSS文字两端对齐
- 场景—-在微信小程序的表单开发中常遇到 input 的 label 需要进行文字的两端对齐!
-
由于真正可用的CSS文字两端对齐需要放置一个空标签,本人对此处进行了优化处理,利用伪元素 after 代替空标签 span,来实现该效果,同时将两端对齐的样式提成公用样式的 class ,需要时直接使用。
效果图
实现
wxss
.rui-justify{text-align: justify;}
.rui-justify::after{
content: '';
display: inline-block;
padding-left: 100%;
}
wxml
<view class='rui-form-li'>
<view class='rui-form-li-name rui-justify'>姓名</view>
<view class='rui-form-li-input'><input name="name" placeholder='请填写您的真实姓名' value=''></input></view>
</view>