美文网首页网页前端后台技巧(CSS+HTML)让前端飞互联网科技
web前端html实例-多个div在同一行以相同间隔分布

web前端html实例-多个div在同一行以相同间隔分布

作者: 560b7bb7b879 | 来源:发表于2019-05-06 23:10 被阅读2次

这样的布局效果使用非常的频繁,也就是让多个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在同一行以相同间隔分布

    本文链接:https://www.haomeiwen.com/subject/xvoroqtx.html