Question

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

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 =“arrows”里面的图像是我想要移动的，即使我指定#nextarrow {它正在移动整个我只想通过id或使用first / last一次移动一个图像子

2 个答案:

答案 0 :(得分：2)

答案 1 :(得分：1)

Answer 1

图像为inline，这意味着当您向右箭头添加边距时（左侧具有讽刺意义），紧靠其旁边的图像将受到该填充/边距的影响。

我建议您花一些时间来了解box model。

Answer 2

您的图片似乎是反面的。如果切换图像的顺序，将影响接下来发生的事情。让我为你分解一下。如果第一个图像是右箭头而第二个图像是左箭头，则会有两个箭头指向另一个： - ＆gt; ＆LT; - 现在CSS做了什么，当你决定给“下一个箭头”留下任何东西的边距时，会将右箭头的全部内容与之后的内容一起移动。

所以再次，你把右箭头放在第一位，这意味着你要求右箭头随箭头后面的任何东西移动。现在，如果你想保持左边的右箭头和右边的左箭头但仍然将两者分开，你只需要调用CSS来移动“上一个箭头”，如下所示：

#prevarrow {
margin-left:350px;

}

这实际上会将箭头移动到如下所示： - ＆gt; ＆LT; -
但是，让我们再考虑另一种情况：如果您交换了图像怎么办？所以现在它看起来像这样：＆lt; - - ＆gt; 好吧，看起来似乎如果你使用完全相同的CSS代码：

#nextarrow {
    margin-left:350px;
}

它只会移动右箭头和右箭头之后的任何东西，在这种情况下什么都不是。但反之亦然，如果你现在使用带有“prevarrow”的CSS，在这种情况下它会被翻转，它会移动两个箭头。我鼓励你交换图像，看看上面两个CSS代码会发生什么。你会注意到，一个人将整个线路的内容移开，而另一个人只是移动一个箭头。同样，我的jsfiddle也将解释发生的事情：http://jsfiddle.net/HdA24/2/

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

2 个答案: