在 stackoverflow 上还有其他几个类似的问题，但我无法从中得到任何东西，所以必须发布我自己的问题。这是网址...
http://quoteic.com/part?no=PC68EN302RC25
我希望 3 个按钮位于一条线上并且底部对齐。 Fiverr 的网站就是一个很好的例子（抱歉，我不让我发布屏幕截图）。
【问题讨论】：
标签： css button alignment media social
将所有按钮放入它们自己的 DIV 中，并使用宽度和 float:left 设置它们的样式，然后将所有这些包装到 DIV 中。这有助于我调整和控制他们的位置。
【讨论】：
您最好的选择是，因为它们都略有不同，并且在不同的浏览器中再次不同，所以您最好将它们包装在您自己的代码中。例如
<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;
}
或者任何显示最好结果的东西。
请确保将每个按钮的所有宽度都设置为最小值，否则它们都非常宽。尤其是 Facebook。
【讨论】：
您可以使用无序列表并将每个图像放在列表项中并内联显示。然后，这将在水平线上显示您的链接。您还可以从网站上找到免费使用的社交媒体图标（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;
}
【讨论】：
您需要做的是创建以下结构：
<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> 或其中的任何特定元素。
【讨论】：