html - 如果我改变个人的左边距，所有图像都会一起移动

Question

为此，我正在尝试制作包含三个图像的 slider ，我在 div 中制作了 ul li，并尝试通过更改控制台中的剩余边距来移动单个 li，但它会将所有图像一起移动。请纠正我错误的地方。看下面的代码

#slider{
    width: 311px;
    height: 333px;
    overflow:hidden;     
    }

    #slider .slides{
    display: block;
    width: 311px;
    height:333px;
    margin: 0;
    padding: 0;
    }

    #slider . slide{
    position:absolute;
    float:left;
    list-style-type: none;
    width:311px;
    height:333px;    
    }

<div id='slider'>            
            <ul class='slides'>
                <li class='slide'><img src='images/a.jpe'></li>
                <li class='slide'><img src='images/b.jpe'></li>
                <li class='slide'><img src='images/c.jpe'></li>                
            </ul>                        
</div>

    

Answer 1

这对我有用:

li.slide:nth-of-type(2) {
    margin-left: 20px;
}

这只是移动了第二个 li 元素。