CSS如何让 float anchor 彼此水平相邻

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;
}​

或

.socialMediaPlugin * {
    float: right;
}​

虽然我不建议这样做，而且它很老套!

此外，您应该为类似的事情使用有序列表，您可以看到一个例子 here

根据海报的要求编辑

为了保持链接的顺序，有必要使用 display:block 将链接包裹在一个 div 中，并将其 float 到右侧。现场看example .

CSS

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