css如何實現li元素在父元素中平均分佈效果:在實際應用中，通常父元素中有一排子元素，並且這些子元素能夠在父元素中均勻分佈。雖然效果簡單，實現的方式也各有不同，但是對於一些初學者可能會構成一些困擾。代碼如下: <!DOCTYPE html> <html> <head> <meta charset="
css如何實現li元素在父元素中平均分佈效果:
在實際應用中，通常父元素中有一排子元素，並且這些子元素能夠在父元素中均勻分佈。
雖然效果簡單，實現的方式也各有不同，但是對於一些初學者可能會構成一些困擾。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> *{ margin:0px; padding:0px; } #box{ width:625px; border:1px solid red; overflow:hidden; margin:50px; } #ul_box{width:630px;} ul li{ width:100px; height:30px; margin-right:5px; list-style:none; float:left; background:#CCC; text-align:center; line-height:30px; } </style> </head> <body> <div id="box"> <div id="ul_box"> <ul style="overflow:hidden"> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> <li>螞蟻部落五</li> <li>螞蟻部落六</li> </ul> </div> </div> </body> </html>
上面的代碼實現了導航欄在父元素中均勻分佈的效果，並且兩端都沒有空隙，只有中間有空隙。
實現原理:
其實實現的原理非常的簡單，就是li元素浮動以後，然後設置右外邊距，再將父元素ul_box（其實用ul元素也是可以的）寬度設置為ul的寬度，也就是630（包括li元素的寬度還有外邊距），這個時候自然左右邊會有空隙，然後只要使用最外層的box父元素進行一下overflow截取就可以了。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=16765
更多內容可以參閱:http://www.softwhy.com/divcss/
