html - CSS & HTML 边距

Question

我想移动这两个箭头图像，使其彼此靠近，目前我将它们分开。这是我需要的：

http://postimg.org/image/s4dv20xy1/

这是我的工作进度：JsFiddle

HTML：

<div id="arrow">
    <img src="http://gyazo.com/736c6c5e6e5e3355b804ccda9143560c.png" alt="Arrow1"></img>
    <img src="http://gyazo.com/736c6c5e6e5e3355b804ccda9143560c.png" alt="Arrow1"></img>
</div>

CSS：

#arrow img {
            margin:2px;
}

谢谢。

PS：忽略左边或右边的位置

Answer 1

您可以将边距设置为负数（如-10px），箭头将彼此靠近。

Answer 2

使用 css 不是第一个子选择器，

工作示例

http://jsfiddle.net/CarlG/Hhbtf/

这是CSS

#arrow img {
    margin:2px;
}

#arrow img:not(:first-child) {
    position: relative; right: 22px;
}

Answer 3

您可以使用兄弟选择器：

#arrow img {
    margin: 2px;
}

#arrow img+img {
    margin-left: -25px;
}

工作示例：jsfiddle

理论信息：

在 css 中+是一个兄弟组合选择器，它允许您选择一个直接在另一个特定元素之后的元素。在此示例中，它是一个位于其他图像旁边的图像，但您可以使用任何元素，例如，您可能希望将样式应用于 div 旁边的任何段落，您将使用div + p它并且它将匹配下一个段落到一个 div，如果你想在另一个元素之前匹配一个元素，你应该使用-上面示例中的兄弟组合器，它将匹配div而不是p

Answer 4

如果你给两张图片一个单独的 ID，你可以单独移动它们。像这样：

HTML：

<img id="arrow1" src=""></img>
<img id="arrow2" src=""></img>

CSS：

#arrow2 {margin-left: -20px;}
#arrow1{margin-left: 0px;}

Answer 5

我在 css 中使用相同的类这样做：

#arrow img {
margin:2px;
padding:0px;
margin-right:-20px;
}

工作小提琴：http: //jsfiddle.net/v6MPj/1/