Question

所以我有2张图片，一个用于Facebook的图标，一个用于来自FontAwesome的Twitter的图标。我拥有代码和所有东西，但对于我的一生来说，我无法在页面上随意移动它。救命？？

这是我的HTML

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<style>
    .large {
        font-size: 4cm;
    }

    .blue {
        color: blue;
    }
</style>
<a href="https://www.facebook.com/"> <i class="fab fa-facebook-square large blue"></i></a>

<a href="https://twitter.com/"><i class="fab fa-twitter-square large blue"></i></a>

这是我一直在摆弄的CSS

    facebook-square {
        margin-left: 20px;
    }

    twitter-square {
        margin-left: 170px;
    }

Answer 1

您可以尝试使用位置：相对

facebook-square {
        position: relative;
        left:20px;
    }
twitter-square {
        position: relative;
        left:170px;
    }

Answer 2

很抱歉，如果您只是简化CSS，在这种情况下，请忽略此答案，但是选择器的顺序必须是.fa-facebook-square和.fa-twitter-square，而不是facebook-square和twitter-square以与html标记中的类匹配。

并且如前一个答案中所述，您确实需要先将position设置为某些值才能移动元素。 See the MDN Docs here

Answer 3

可能是您在类选择器上遇到问题，因为要选择具有特定类的元素，您必须编写一个句点（。）字符，后跟该类的名称。您的情况应如下所示

.fa-facebook-square {
        position: relative;
        left:20px;
    }
.fa-twitter-square {
        position: relative;
        left:170px;
    }

Answer 4

将这些选择器添加到您的html标签.fa-facebook-square和.fa-twitter-square中，而不是 facebook-square 和 twitter-square 中，以与您的HTML匹配CSS中的类

需要帮助在CSS中移动超链接的图像

4 个答案: