web前端html例項-多個div在同一行以相同間隔分佈

這樣的佈局效果使用非常的頻繁,也就是讓多個div在一行分佈,並且div於div之間的間隙是一樣的。
多用在對於產品的展示之用,下面就介紹一下如何實現此中佈局。
程式碼例項如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端學習扣qun:731771211每日分享技術,學術交流</title> <style type="text/css"> *{ margin:0px; padding:0px; } #box{ width:430px; height:200px; background-color:red; overflow:hidden; margin:100px; } #box ul{ width:440px; } #box ul li{ width:100px; height:100px; background-color:green; float:left; margin-right:10px; list-style:none; } </style> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
