JSFiddle - React, Tailwind, and code Playground

css 文本两端对齐

by gothic

HTML

<div class="test1">用户名：</div>
            <div class="test1">手机：</div>
            <div class="test1">邮箱：</div>
            <div class="test1">验证码：</div>

CSS

.box {
    width: 100px;
}
.test1{
    /* width: 100px; */
	overflow:hidden;
	height:19px;
	text-align:justify;
	text-align-last:justify;
}
.test1:after{
	display:inline-block;
	content:'';
	overflow:hidden;
	width:100%;
	height:0;
}