CSS文字两端对齐

Rattenking

发布于 2021-02-01 10:51:55

2.1K0

发布于 2021-02-01 10:51:55

文章被收录于专栏：Rattenking

微信小程序----CSS文字两端对齐

场景----在微信小程序的表单开发中常遇到 input 的 label 需要进行文字的两端对齐！
参考：真正可用的CSS文字两端对齐由于真正可用的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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018/06/07 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css

小程序

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

小程序

登录后参与评论

0 条评论

热度

CSS文字两端对齐

CSS文字两端对齐

微信小程序----CSS文字两端对齐

效果图

实现

wxss

wxml

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐