css - 尝试排列 Twitter、Pinterest 和 Facebook 按钮

Question

在stackoverflow上还有其他一些类似的问题，但我无法从中得到任何东西，所以必须发布我自己的。这是网址...

http://quoteic.com/part?no=PC68EN302RC25

我希望 3 个按钮位于一条线上并底部对齐。Fiverr 的网站就是一个很好的例子（抱歉，我不让我发布截图）。

Answer 1

将所有按钮放入它们自己的 DIV 中，并使用宽度和 a 设置它们的样式float:left，然后将所有这些包装到 DIV 中。这帮助我调整和控制他们的立场。

Answer 2

你最好的选择，因为它们都略有不同，并且在不同的浏览器中再次不同，所以将每一个都包装在你自己的代码中。例如

<div class="btn_facebook"></div>
<div class="btn_twitter"></div>

等等

并将其包装在另一个容器中：

<div class="social_buttons"></div>

然后要么将它们向左浮动，要么显示内联块。将每一个设置为相同的高度，它们将尽可能排成一行。

除非您愿意浏览每个浏览器以相对定位来推动它们，否则它们永远不会完美排列。如果您确实想这样做：

.social_buttons > div {
    position: relative;
}

和

.social_buttons .btn_facebook {
    top: -2px;
}

或者任何显示最好结果的东西。

确保将每个按钮的所有宽度都设置为最小值，否则它们都非常宽。脸书尤其如此。

Answer 3

您可以使用无序列表并将每个图像放在列表项中并内联显示。然后，这将在水平线上显示您的链接。您还可以从网站上找到免费使用的社交媒体图标（16 像素或 32 像素等），这样您的所有图标都可以保持一致的大小。

<div id="socialmedia">
    <ul>
        <li><a href="http://www.twitter.com" target="_blank"><img src="YourTwitterFileName" /></a></li>
        <li><a href="http://www.pinterest.com" target="_blank"><img src="YourPinterestFileName" /></a></li>
        <li><a href="http://www.facebook.com" target="_blank"><img src="YourFacebookFileName" /></a></li>
    </ul>
</div>

这是您可以用于 ul 的样式

#socialmedia ul li {
    display: inline;
    margin-left: 5px;
}   

#socialmedia img {
    border: none;
}

Answer 4

您需要做的是创建以下结构：

<table id="social_links_tab">
    <tr>
        <td><a href="http://link_to_twitter_page"><img src="http://src_of_img"/></a></td>
        <td><a href="http://link_to_pinterest_page"><img src="http://src_of_img"/></a></td>
        <td><a href="http://link_to_facebook_page"><img src="http://src_of_img"/></a></td>
    </tr>
</table>

这将有效地将图标水平排列在一起。此外，您可以随意将样式附加到<table>内部的特定元素或任何特定元素。