css - CSS如何让浮动的锚点彼此相邻

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

You need to apply it to the links, not the container, so you CSS should read

.socialMediaPlugin a {
    float: right;
}​

You can see an example here

Alternatively you could use

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

OR

.socialMediaPlugin * {
    float: right;
}​

although I would not advise it, and it is quite hacky!

Furthermore, you should be using an ordered list for things like that, and you can see an example of that here

EDIT based on request from poster

So that the order of the links can be maintained, it is necessary to wrap the links in a div with display:block and float that right instead. See this live example.

CSS

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

Answer 2

you can use

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

the links will be side-to-side

Answer 3

由于锚点已经是内联级元素，它们自然会彼此相邻堆叠。

问题更可能是您的容器不够宽，无法容纳堆叠的物品，因此它正在包裹它们。

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