Question

标记如下

     <div class="socialMediaPlugin">
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_google_plusone_share"></a>
    <a class="addthis_button_pinterest" ></a>
    <a class="addthis_button_email"></a>
  </div>

然后我在尝试

.socialMediaPlugin {
float: right;

} 但他们出现在彼此之下，而不是下一个？我怎么能并排得到它们呢？

Answer 1

您需要将其应用于链接，而不是容器，因此您应该阅读CSS

.socialMediaPlugin a {
    float: right;
}

您可以看到示例here

或者你可以使用

.socialMediaPlugin:nth-child(n) {
    float: right;
}

OR

.socialMediaPlugin * {
    float: right;
}

虽然我不会建议它，但它非常hacky！

此外，你应该使用有序列表来做这样的事情，你可以看到here

的例子

根据海报的要求编辑

为了保持链接的顺序，有必要将链接包含在display:block的div中，然后向右浮动。直播example。

CSS

.socialMediaPlugin div {
    display: block;
    float: right;
}

Answer 2

你可以使用

.socialMediaPlugin a{
    display: block;
    position: relative;
    float: left;
}

链接将是一对一的

Answer 3

由于锚点是内联级别元素，因此它们会自然地堆叠在一起。

问题更可能是你的容器不够宽，不足以容纳堆积的物品，所以要包装它们。

要么你或你有一些其他样式应用于你的锚元素，导致它们像块级元素一样。

CSS如何水平地将浮动锚点彼此相邻

3 个答案: