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