text-align:justify对齐的使用

最新推荐文章于 2025-06-06 08:24:39 发布

zeroyulong

最新推荐文章于 2025-06-06 08:24:39 发布

阅读量5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签： text-align的使用不同长度的文案对齐

本文链接：https://blog.youkuaiyun.com/zeroyulong/article/details/87917001

css 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用CSS的justify属性使表单字段标题与输入框对齐的方法，通过具体代码实例展示了如何实现‘姓名’、‘曾用名’、‘电子邮箱’等字段的整齐排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：使‘姓名’‘曾用名’‘电子邮箱’对齐

方案：

一、使用&nbsp；加空格来使文案对齐。缺点：调试起来麻烦，而且最终结果不会太好，字间距不好分摊

二、使用text-align:justify来调试代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-align测试</title>
    <style>
    	.clear{
    		clear: both;
    		overflow: hidden;
    	}
        span{
            width: 100px;
            text-align: justify;
            float: left;
        }
        span:after{
            content:'.';
            width: 100%;
            display: inline-block;
            overflow: hidden;
            height: 0;
        }
        input{
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="demo">
    	<div class="clear">
    		<span>姓名</span>：<input type="text" >
    	</div>
    	<div class="clear">
    		<span>曾用名</span>：<input type="text" >
    	</div>
    	<div class="clear">
    		<span>家庭住址</span>：<input type="text" >
    	</div>
    </div>    
</body>
</html>

效果图如下：