微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

将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都要写

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐