css - 浮动li设置margin，某一个li下落？

问题描述

问 题

请问给第1个li设置margin，为什么第3个li会掉下去？

    <ul class="children_left_float">
        <li><a href="#"><img src="img/2.png" alt="2" /></a></li>
        <li><a href="#"><img src="img/2.png" alt="2" /></a></li>
        <li><a href="#"><img src="img/2.png" alt="2" /></a></li>
        <li><a href="#"><img src="img/2.png" alt="2" /></a></li>
    </ul>
        .children_left_float:after {
            content: "";
            clear: both;
            display: block;
            height: 0;
        }
        .children_left_float>div,
        .children_left_float>ul,
        .children_left_float>li{float: left;}
        
        ul,li,a,img,html,body{margin: 0;padding: 0;}
        ul{width: 400px;background: red;list-style: none;}
        ul li img{width: 190px;height: 120px;}
        ul li:first-child{margin: 0 10px 10px 0;}

这个问题已被关闭，原因：问题质量差 - 问题太水、伸手党

解决方案

你有float：left，就是从左往右排列，加了margin后1的高度大于2，正下方没法放3了，3往后排了，挤下去的不是3，而是4。

这篇关于css - 浮动li设置margin，某一个li下落？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！