css实现文字两端对齐
2021-07-10 13:04
标签：containe 代码 over 实现 after img hidden 分享 集合 css实现文字两端对齐，如下效果： 文字两端对齐仅仅使用使用text-algin:justify 无法实现预期效果，这里我们借用伪类(::after)来实现文字的两端对齐。 具体代码如下： 如有错误还望指正 ^-^ css实现文字两端对齐 标签：containe 代码 over 实现 after img hidden 分享 集合 原文地址：http://www.cnblogs.com/web-wangmeng/p/7090318.html
style>
.container>li{
margin:0.5rem auto;
width:4rem;
height: 0.5rem;
line-height: 0.5rem;
border:1px solid #0000ff;
}
.justify {
display: inline-block;
vertical-align: top;
width:100%;
text-align: justify;
}
.justify::after{
content:"";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
style>
ul class="container">
li >
p class="justify">集合地点在哪里呀p>
li>
li>
p class="justify">两端对齐p>
li>
li >
p class="justify">看,我两端对齐了p>
li>
li >
p class="justify">左右p>
li>
ul>
下一篇：js 调用后台接口