当前位置 : 主页 > 网页制作 > html >

web前端CSS---关于text-align设置为justify的相关内容

来源:互联网 收集:自由互联 发布时间:2021-06-12
将text-align设置成justify 可以将内容分散对齐,但是此属性只能对齐非最后一行的内容,可以做一下操作 方法1,添加伪元素after htmlstyle ul li{ width:80px; height:40px; text-align:justify;} ul li::aft

将text-align设置成justify

可以将内容分散对齐,但是此属性只能对齐非最后一行的内容,可以做一下操作

方法1,添加伪元素after

<html>

<style>
    ul li{
        width:80px;
        height:40px;
        text-align:justify;
}
    ul li::after{
        content:"";
        width:100%;
        display:inline-block;
}
</style>
<body>
    <ul>
        <li>姓名</li>
        <li>用户名</li>
        <li>用户信息</li>      
    </ul>

</body>
</html>

注意1:伪元素内容不能忽略
注意2:不设定高度,每个li下方会有空白,使用设置高度行高来取消空白

方法2 使用text-align-last属性设置为justify

ul li{
    text-align:justify;
    text-align-last:justify;
    width:80px;

}

注意1:此方法兼容性不好。 注意2:text-align和text-align-last都要写

网友评论