单行文本两端对齐

最近在整理收藏的书签,看到之前收藏的一个问题,单行文本左右对齐的问题.一开始觉得这是什么问题,太简单了.可以当我看完全文,并亲自实践了一把,这还真是一个问题.

本身这样的一个通常需求来源于表单,如图:

重点是左边 label 部分的布局,乍一看,这有什么难度,不就是一个 text-align: justify;的问题么.然而,实践后可以得出 text-align: justify;针对单行文本是不会起作用的,这个时候才回想起之前遇到这种问题都是以空格来满足需求,但是文本长度不一时就很麻烦,而且空格在不同字体(系统)下的差异很大.

后来查阅 MDN 后可以得到以下信息:

text-align CSS 属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

从 MDN 的描述可以看出，控制文本居中对齐直接写 text-align:justify 就可以。但是这对于多行文本（即有文本换行）除了最后一行都可以实现两端对齐，最后一行依旧左对齐,并不能实现我们的需求,幸运的是,css3 有一个 text-align-last 的属性,text-align-last 属性规定如何对齐文本的最后一行。但是这里注意一点 text-align-last 属性只有在 text-align 属性设置为 “justify” 时才起作用。所以，利用这个属性就可以控制最后一行文本的对齐方式。

但遗憾但是 text-align-last 有一定的兼容性问题,safari 完全不支持,我们也不可能完全放弃 safari 吧.这个时候回到前面的 text-align: justify; 如果我们在文本后边加上一个 inline-block 元素,并将新增的 inline-block 元素长度设置为 100%,那是不是达到了换行的效果,就满足了 text-align: justify; 左右对齐的条件.说做就做,经测试,该方案可行.

最后上本次实践的代码:

<form action="">
	<div class="form-group">
		<label for="">姓名</label>
		<input type="text" />
	</div>
	<div class="form-group">
		<label for="">身份证</label>
		<input type="text" />
	</div>
	<div class="form-group">
		<label for="">手机号码</label>
		<input type="text" />
	</div>
	<div class="form-group">
		<label for="">户籍所在地</label>
		<input type="text" />
	</div>
</form>

label {
	float: left;
	height: 22px;
	width: 100px;
	position: relative;
	margin-right: 20px;
	text-align: justify;
	text-align-last: justify;
	text-justify: distribute;
}
label::before {
	right: -10px;
	content: ":";
	position: absolute;
}
label::after {
	height: 0;
	width: 100%;
	content: "";
	display: inline-block;
}

[越努力，越幸运！]