CSS 文本一行两端对齐无效解决方案

今天写登录界面的时候需要左边的名称两端对齐，但是使用 text-align: justify;属性无效

这里在网上找到一个解决方案就是使用text-align: justify;加上display: inline-block;text-align-last: justify;这里两个属性即可

<view class="form-item flex align-center flex-sub">
	<text class="item-name">用户名</text>
	<view class="  padding-8 flex-sub flex margin-left12">
		<input
			class="flex-sub form-input"
			type="text"
			placeholder="请输入您的邮箱/用户名"
			placeholder-style="color:rgba(255,255,255,.5);font-size:26upx;"
			value=""
		/>
	</view>
</view>
<view class="form-item flex align-center flex-sub">
	<text class="item-name">密码</text>
	<view class="  padding-8 flex-sub flex margin-left12">
		<input
			class="flex-sub form-input"
			type="password"
			placeholder="请输入您的密码"
			placeholder-style="color:rgba(255,255,255,.5);font-size:26upx;"
			value=""
		/>
	</view>
</view>

.item-name {
	width: 130upx;
	display: inline-block; // 变成行块元素
	text-align: justify;
	text-align-last: justify;
}

记录下解决方案，方便他人使用。

/**
 *博主：Now大牛
 *QQ : 201309512
 *发布日期：2021年8月27日03:50:09
 */

转载请著名出处！