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。