css图像一起移动而不是单独移动

Question

每当我尝试移动图像时，即使我专门识别身份证，它们也会一起移动而不是单独移动。

body { 
    margin:0; 
    padding:0; 
    position:relative; 
    background:url(../images/imgs/backgrnd.png) no-repeat; 
    background-size:cover; 
} 

@font-face { 
    font-family:mainText; 
    src:url(../font/HelveticaNeueLTPro-UltLtEx.otf); 
} 

#holder { 
    background:url(../images/imgs/rectangle%20and%20letters.png) no-repeat; 
    width:500px; 
    height:600px; 
    position:relative; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:11.2em; 
} 

ul { 
    list-style:none; 
    list-type:none; 
    padding:0; 
    margin:0; 
} 

#nextarrow { 
    margin-left:350px; 
} 


<section id="cont"> <!-- main content wrapper --> 
    <div id="holder"> 
     <ul id="imagelist"> <!-- image cycle: prev/next --> 
      <li><img src="images/imgs/iPhone.png" width="256" height="256" border="0"></li> 
      <li><img src="images/imgs/websitesimg.png" width="289" height="187" border="0"></li> 
     </ul> 

    </div> 
</section> 

<div id="arrows"> 
    <img src="images/imgs/rightarrow.png" id="nextarrow" width="15" height="130" alt="ja" /> 
    <img src="images/imgs/leftarrow.png" id="prevarrow" width="15" height="130" alt="la" /> 
</div> 

内DIV ID =“箭头”的图像是什么，我试图移动，即使我指定#nextarrow {它是由两种标识移动整个我只想一次移动一个图像或使用第一/最后一个子

Answer 1

你的图像看起来是相反的。如果您切换图像的顺序，它将影响接下来发生的事情。让我为你分解一点点。如果第一个图像是右箭头，第二个图像是左箭头，则会有两个箭头指向另一个箭头： - > < - 现在CSS决定让“下一个箭头”任何东西的左边，都会将右箭头的全部内容与其后的任何内容一起移动。

再说一遍，你先把右箭头放在第一位，这意味着你要求右箭头随箭头移动。现在，如果你想保持右箭头左边和右边的左箭头，但仍然将二者分开，你只需致电CSS转向了“上一个箭头”是这样的：

#prevarrow { 
margin-left:350px; 

}

这实际上会将箭头移动到如下所示： - > < -
但是，让我们来看另一个场景：如果您交换了图像？所以，现在它看起来是这样的：< - - > 好，因为它看起来可能，如果你要使用完全相同的CSS代码，你已经张贴：

#nextarrow { 
    margin-left:350px; 
} 

只会转向右箭头以及之后的任何东西，在这种情况下什么都不是。但反之亦然，如果您现在在翻转的情况下使用带“prevarrow”的CSS，则会移动两个箭头。我鼓励你交换图像，看看上面的两个CSS代码会发生什么。你会注意到一个人将把整行的内容转移过来，而另一个人只会转移一个箭头。再次，我的jsfiddle也将解释发生了什么：http://jsfiddle.net/HdA24/2/

Answer 2

图像是inline，因为你马上添加保证金右箭头，这是具有讽刺意味出现在左边，图像旁它会通过填充/保证金的影响，这意味着。

我建议花点时间了解box model。