CSS实现文字两端对齐

AWei 2023/8/31 CSS

# text-align (opens new window)可以用来设计文本内容的对齐方式

text-align 属性规定元素中的文本的水平对齐方式。

start：内容对齐开始边界
end：内容对齐结束边界
left：内容左对齐（默认值）
right：内容右对齐
center：内容居中对齐
justify：内容两端对齐

# text-align (opens new window) 对齐规则

text-align属性规定元素中的内容（例如文字）的水平对齐方式。对齐方式相对于它的所属的元素，此元素本身相对于父元素的对齐方式不受text-align属性影响

text-align只对块级元素或者table-cell有效果
text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐
justify：文字向两侧对齐，对最后一行无效

# 效果图

# 代码片段:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            width: 100px;
            text-align: justify;
            float: left;
            overflow: hidden;
        }
        span:after{
            content:'';
            width: 100%;
            display: inline-block;
            height: 0;
        }
        input{
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="demo">
        <span>昵称</span>：<input type="text" style = 'width: 100px'><br><br>
        <span>电邮箱</span>：<input type="email" style = 'width: 100px;'><br><br>
        <span>电子邮箱</span>：<input type="email" style = 'width: 100px;'>
    </div>
</body>

# 注解

给span标签添加伪元素，让伪元素独占一行且是最后一行，这样span的内容就可以通过text-align (opens new window)的规则实现左右对齐的效果了

::after (opens new window)用来创建一个伪元素，作为==已选中元素的最后一个子元素==。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

为什么不使用justify-all (opens new window)

text-align还有一个可选值justify-all,根据MDN上的定义：justify-all同justify一样，区别是最后一行也会两端对齐。

为什么不使用justify-all呢？因为justify-all是一个体验性的API，各个主流浏览器都不支持，浏览器支持度