【已解决】html元素如何使字体占据相同的元素显得整齐-Toy模板网

这篇具有很好参考价值的文章主要介绍了【已解决】html元素如何使字体占据相同的元素显得整齐。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本博文源于自身的亲身实践，让html的文本元素对齐，如果不让其对齐就会变得很丑陋，如下图，那么如何设置才能让元素占据相同呢？

1、问题来源

【已解决】html元素如何使字体占据相同的元素显得整齐,JS基础,html,前端

2、问题解决思路

笔者目的是什么，笔者目的时不管A有多少个，总是对齐的，有相同的大小，那么input框也会有相同的大小，那么改变css样式我们就能解决啦。

3、问题解决方案

只需要给A所在labe设置css样式就行了。

background-color: red;
width: 120px;
display: inline-block;

4、问题完整源码及效果

【已解决】html元素如何使字体占据相同的元素显得整齐,JS基础,html,前端文章来源地址https://www.toymoban.com/news/detail-560537.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.cfg_row_left {
				background-color: red;
				width: 120px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>
				<label class="cfg_row_left">AA:</label>
				<input type="text" class="cfg_row_right" />
				<label class="cfg_row_left">AAAAAA:</label>
				<input type="text" class="cfg_row_right" />
			</li>
			<li>
				<label class="cfg_row_left">AAAA:</label>
				<input type="text" class="cfg_row_right" />
				<label class="cfg_row_left">AABBBBAA:</label>
				<input type="text" class="cfg_row_right" />
			</li>
		</ul>
	</body>
</html>