uniapp数值后面的单位右对齐

作者:米云网络 时间:2024-03-15 浏览:205
205
<template>
  <view class="container">
    <text class="number">123</text>
    <text class="unit">单位</text>
  </view>
</template>

 

<style>
.container {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 这里实现容器右对齐 */
}
 
.number {
  text-align: right; /* 这里实现数值右对齐 */
}
 
.unit {
  margin-left: 10px; /* 单位与数值之间的间隔 */
}
</style>


在这个例子中,.container 是一个flex容器,它的子元素.number.unit通过text-align: right;实现了右对齐。.number是数值部分,.unit是单位部分。通过在.container上设置justify-content: flex-end;可以使整个容器的内容右对齐。

文章链接:https://www.yunscrm.cn/dongtai/161.html
文章标题:uniapp数值后面的单位右对齐
声明: 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!

相关阅读