百分比实现
首先最简单的是使用百分比实现，如下一个展示列表：
1 <!DOCTYPE html> 2 <html> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .list{ 8 width: 100%; 9 background: #f0f0f9;10 list-style: none;11 font-size: 0; /* 去掉边框的影响 */12}13.img{14 display: inline-block;15 width: 30%;16 height: 60px;17 margin-right: 5%;18 border: 1px solid lightblue;19 box-sizing: border-box; /* 削去border边框宽度的影响 */20 text-align: center;21}22 </style>23</head>24<body>25 <div class="box">26 <ul class="list">27<li class="img"><img src="img/HBuilder.png" alt="" /></li>28<li class="img"><img src="img/HBuilder.png" alt="" /></li>29 <li class="img" style="margin-right: 0;"><img src="img/HBuilder.png" alt="" /></li>30 </ul>31 </div>32</body>33 </html>
效果：
这样当然很简单，而且也不会存在什么兼容性问题，但是其他问题还有很多：
定宽的列表，效果很难实现
如果内部img元素宽度不是100%且需要实现两端对齐，效果很难实现
如果列表项数量是动态的，效果不能实现
flex实现
第二种实现方式就比较先进了，除了需要学习flex相关知识，使用还是很简单的，实现两端对齐效果，关键点是在flex容器上使用justify-content属性，并将其值设为space-between;
1 <!DOCTYPE html> 2 <html> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .list{ 8 display: -moz-box; 9 display: -webkit-box;10 display: -webkit-flex;11 display: -moz-flex;12 display: -ms-flexbox;13 display: -ms-flex;14 display: flex;15 -webkit-box-pack: justify;16 -moz-box-pack: justify;17 -ms-flex-pack: justify;18 -webkit-justify-content: space-between;19 -moz-justify-content: space-between;20 -ms-justify-content: space-between;21 justify-content: space-between; display: flex;22 justify-content: space-between;23}24.img{25 display: block;26}27 </style>28</head>29<body>30 <div class="box">31 <ul class="list">32<li class="img"><img src="img/HBuilder.png" alt="" /></li>33<li class="img"><img src="img/HBuilder.png" alt="" /></li>34 <li class="img" style="margin-right: 0;"><img src="img/HBuilder.png" alt="" /></li>35 </ul>36 </div>37</body>38 </html>
text-align:justify实现
另外一种要介绍的是使用text-align:justyle;实现方式。
我们知道text-align:justify;效果是实现文字两端对齐,如。
