td中的内容两端对齐

最新推荐文章于 2023-01-12 08:48:19 发布

往事如烟隔多年

最新推荐文章于 2023-01-12 08:48:19 发布

阅读量2.5k

点赞数 1

文章标签： HTML CSS

本文链接：https://blog.csdn.net/mdzz14/article/details/103812742

版权

今天在写表单时,发现了一个文字两端对齐的问题,以往都是通过加空格的方式来完成的,在查阅资料后发现可以通过css来实现,让我们先来看一看实现后的效果。

以下是具体代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .text{
        	text-align:justify;
        	text-align-last: justify;
        }
    </style>
</head>
<body>
<form action="">
	<table border="0" cellspacing="2" cellpadding="2">
		<tr>
			<td class="text">用 户 名</td>
			<td><input type="text" name="username" id="" value="" /></td>
		</tr>
		<tr>
			<td class="text">密 码</td>
			<td><input type="text" name="userpwd" id="" value="" /></td>
		</tr>
		<tr>
			<td class="text">确 认 密 码</td>
			<td><input type="text" name="username" id="" value="" /></td>
		</tr>
	</table>
</form>
</body>
</html>

需要注意的是td中要被应用两端对齐样式的字符之间需要打一个空格符号,否则无法实现效果。