個人の余白を変更するとすべての画像が一緒に動く

Question

その目的のために3つの画像のスライダーを作ろうとしています。ul liをdivに入れて、コンソールに残っている余白を変更して個々の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要素を移動していました。