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

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些