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
 */
           

轉載請著名出處！