美文网首页网页前端后台技巧(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