微信小程序文字水平对齐各自居左居右

发布于 2020-03-28  450 次阅读


先上一下效果图:

20200328111757.png

网上没找到类似的代码,可能是自己搜索方法不对。

在看了php中文网的微信小程序教程和结合某些开源小程序代码后,改出了下面代码,供大家参考。

WXML

 <view class='common-text'>
    <view class='common-text-left'><text>哟(๑>ڡ<)来啦~</text></view>
     <view class='common-text-right'><text>大佬请坐</text></view>
   </view>

20200328112000.png

WXSS

.common-text {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  padding: 0 24rpx;
  background: #fff;
}

.common-text-left {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-left: 30rpx;
}

.common-text-right {
  font-size: 26rpx;
  font-weight: 400;
  color: #959595;
  margin-right: 10rpx;
}

20200328112057.png

本文标题:《微信小程序文字水平对齐各自居左居右》

本文链接:https://wnag.com.cn/1101.html

特别声明:除特别标注,本站文章均为原创,本站文章原则上禁止转载,如确实要转载,请电联:wangyeuuu@qq.com,尊重他人劳动成果,谢过~


正因为有要好好实现的梦想,所以今天也要好好加油。