不能在不移动它们或其他东西的情况下移动 div 中的两个图像，我该如何移动一个？答案

【问题标题】：Can't move two images in a div without moving both of them or something else, how do I just move one?不能在不移动它们或其他东西的情况下移动 div 中的两个图像，我该如何移动一个？
【发布时间】：2014-08-05 13:49:02
【问题描述】：

这是我的 HTML：

<footer>

        <div class="container clearfix">

            <div id="footer-content">

                <p id="copyright">Copyright &copy; 2014</p>

                <div class="social">

                    <a href="http://www.facebook.com" target="_blank"><img src="images/facebook_icon.gif" alt="Follow us on Facebook"></a>
                    <a href="http://www.twitter.com" target="_blank"><img src="images/twitter_icon.gif" alt="Follow us on Twitter"></a>

                </div><!--end of social-->

            </div><!--end of footer-content-->

        </div><!--end of container & cleafix-->

    </footer>

这是我的 CSS：

footer {
background: #d37a7a;
color: #fff;
margin-top: 95px;
height: 98px;
overflow: hidden;
}
#copyright {
float: left;
font-size: 19px;
padding: 20px 0;
}

.social {
float: right;
padding: 20px 0;
}

我似乎无法将 Facebook 图标向左移动一点点。我尝试使用边距和填充将其推向左侧，但它要么同时移动 twitter 和 facebook 图标，要么不执行任何操作，要么将 twitter 图标推到 facebook 图标下方。

我也试过把它放在自己的 div 中，然后做 position: relative 然后移动它，但它会再次将推特图标推到它下面。

对我应该做什么有什么建议吗？谢谢

【问题讨论】：

为第一个锚点添加右边距对我有用。
你能粘贴你使用的代码吗？

标签： html css

【解决方案1】：

您应该为每个社交媒体主播添加课程：

<a class="facebook" href="http://www.facebook.com" target="_blank"><img src="images/facebook_icon.gif" alt="Follow us on Facebook" /></a>
<a class="twitter" href="http://www.twitter.com" target="_blank"><img src="images/twitter_icon.gif" alt="Follow us on Twitter" /></a>

然后您可以将样式仅应用于一个元素：

.facebook {
    margin-right: 10px;
}

【讨论】：

成功了，谢谢！但是，当我尝试使用 facebook 的 id 时，为什么将它们放在课堂上却不起作用？
@user3910035 我不确定，会不会是你的选择器？如果你有<a id="facebook">，你在CSS中的选择器应该是#facebook

【解决方案2】：

你有三个选择。第一种可能也是最安全的方法是向锚点添加类，如前所述。除此之外，您还可以通过 attribute 值选择一个元素：

.social a[href='http://www.facebook.com']{
    margin-right: 10px;
}

或使用child selector：按位置选择元素：

.social a:first-child{
    margin-right: 10px;
}

【讨论】：