uni-forms-item label两端对齐

### 实现 `uni-forms-item` 中 Label 两端对齐的方法 为了使 `uni-forms-item` 组件中的 label 达到两端对齐的效果，可以采用 CSS 进行样式调整。具体来说，通过设置父容器的宽度以及子元素的布局方式来实现这一效果。 #### 使用 Flexbox 布局实现两端对齐 Flexbox 是一种强大的布局工具，在此场景下非常适合用于处理两端对齐的需求。下面是一个具体的例子： ```css /* 设置全局样式 */ .reset-label /deep/ .uni-forms-item__label { display: flex; justify-content: space-between; /* 子项在主轴上两端对齐 */ } /* 防止文本超出容器边界 */ /deep/ .label-text, /deep/ .is-required { white-space: nowrap; /* 文本不换行 */ overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 显示省略号 */ } ``` 上述代码片段中，`.uni-forms-item__label` 类被赋予了 `display: flex` 和 `justify-content: space-between` 属性，这使得其内部的内容能够在水平方向上自动分布并保持两端对齐[^1]。 如果遇到较长的文字导致右侧内容不对齐的情况，则可以通过增加右侧行内盒模型的宽度，并配合居中对齐的方式解决问题[^2]： ```css .right-box { width: 70%; /* 可根据实际需求调整比例 */ text-align: center; } ``` 这样做的目的是确保即使左侧文字长度变化较大时，右侧也能稳定地处于指定位置，从而达到视觉上的整齐排列。 #### 完整示例代码 以下是完整的 HTML 结构与对应的 CSS 样式组合使用的实例： ```html <template> <view class="container"> <!-- 表单项 --> <uni-forms> <uni-forms-item :required="true" class="reset-label"> <template v-slot:label> <text class="label-text">这是一个很长的标签名称</text><text class="is-required">*</text> </template> <input type="text"/> </uni-forms-item> <uni-forms-item class="reset-label"> <template v-slot:label> <text class="label-text">短标签名</text> </template> <input type="text"/> </uni-forms-item> </uni-forms> </view> </template> <style scoped lang="scss"> .container { padding: 20rpx; .reset-label /deep/ .uni-forms-item__label { display: flex; justify-content: space-between; } /deep/ .label-text, /deep/ .is-required { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .right-box { width: 70%; text-align: center; } } </style> ``` 以上方法能够有效地让 `uni-forms-item` 下面的 label 实现两端对齐的效果，同时也解决了因文字长短不同而引起的排版混乱问题。