Question

在stackoverflow上还有其他几个问题，但是我无法从中得到任何东西，所以必须发布我自己的。这是URL ......

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

我希望3个按钮位于一行并且底部对齐。一个很好的例子是在Fiverr的网站上（抱歉不允许我发布截图）。

Answer 1

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

Answer 2

你最好的选择，因为它们都略有不同，不同浏览器的不同之处在于将每个浏览器包装在你自己的代码中。 e.g。

<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。

Answer 3

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

<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>或其中的任何特定元素。

试图排队Twitter，Pinterest＆amp; Facebook按钮

4 个答案: