首頁 > 開發者 > JavaScript
css如何?li元素在父元素中平均分布效果，cssli
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/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
