<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.justify_list{text-align: justify;width: 600px;}
.justify_list:after{
width: 100%;
content: "";
display: inline-block;
}
.inner{width:100px; height:100px;background-color: #0086b3; display: inline-block; list-style:none; }
</style>
</head>
<body>
<div class="justify_list">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
</html>
注意:必须内容换行 justify属性才生效，这里代码因为三个子元素只有300px无法换行，所以我给父元素增加了一个伪元素宽度为父元素的百分之百，导致换行，于是justify生效
image.png
网友评论