百分比实现
首先最简单的是使用百分比实现，如下一个展示列表：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .list{ 8 100%; 9 background: #f0f0f9; 10 list-style: none; 11 font-size: 0; /* 去掉边框的影响 */ 12 } 13 .img{ 14 display: inline-block; 15 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;效果是实现文字两端对齐,如。