本文将为关注织梦者的朋友提供的是的css如何实现li元素在父元素中平均分布效果相关教程，具体实例代码请看下文:
css如何实现li元素在父元素中平均分布效果:在实际应用中，通常父元素中有一排子元素，并且这些子元素能够在父元素中均匀分布。虽然效果简单，实现的方式也各有不同，但是对于一些初学者可能会构成一些困扰。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.faniwl.com/" />
<title>在DIV不居中如何让li元素能够平均分布（纯css实现）</title>
<style>
*{
margin:0px;
padding:0px;
}
#box{
width:1020px;
border:1px solid red;
overflow:hidden;
margin-right: auto;
margin-left: auto;
}
#ul_box{
width:1025px;
}
ul li{
width:200px;
height:300px;
margin-right:5px;
list-style:none;
float:left;
background:#CCC;
text-align:center;
line-height:300px;
}
</style>
</head>
<body>
<div id="box">
<div id="ul_box">
<ul style="overflow:hidden">
<li>互补网一</li>
<li>互补网二</li>
<li>互补网三</li>
<li>互补网四</li>
<li>互补网五</li>
</ul>
</div>
</div>
</body>
</html>
注：在使用的过程中，需要#ul_box宽度比#box宽度，多出li标签边距的数值
上面的代码实现了导航栏在父元素中均匀分布的效果，并且两端都没有空隙，只有中间有空隙。实现原理:其实实现的原理非常的简单，就是li元素浮动以后，然后设置右外边距，再将父元素ul_box（其实用ul元素也是可以的）宽度设置为ul的宽度，也就是630（包括li元素的宽度还有外边距），这个时候自然左右边会有空隙，然后只要使用最外层的box父元素进行一下overflow截取就可以了。
