第一种：百分比。使用均分的百分比宽度。
第二种：css3弹性布局。父级给定宽度display:flexflex-direction:row子元素全部设置flex:1；
用百分比来做，比如html如下
<div class="demo"><div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
css如下
.demo{width: 1000pxheight: 300px}.box{width: 100%height: 33.3%}
效果就是demo被box均分为3个宽1000高100的三个块，当然，3个33.3%是不能完全达到百分百，但在显示界面基本看不出什么了
<!doctype html><html>
<head>
<meta charset="gb2312">
<title>无标题文档</title>
<style type="text/css">
body, ul, li {
margin: 0px
padding: 0px
}
ul {
background-color: #999
height: 140px
width: 100%
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
padding: 0px 10px
}
li {
background-color: #CCC
list-style-type: none
margin: 10px 0px 10px 1px
height: 50px
float: left
width: 25%
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
}
li:nth-child(1) {
margin-left: -3px
}
li:nth-child(5) {
margin-left: -3px
}
</style>
</head>
<body>
<ul>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
</body>
</html>
你是要这种效果么？
