web前端html實例-多個div在同一行以相同間隔分布
阿新 • • 發佈：2019-05-07
itl http tex charset 實現 ans mage ctype 交流 
這樣的布局效果使用非常的頻繁，也就是讓多個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>
web前端html實例-多個div在同一行以相同間隔分布