如何将社交媒体图标排成一行？

Question

我设法将facebook，twitter和g +1社交媒体按钮添加到我的网站中。但是当我尝试将VK like按钮添加到同一行时，它只是在其余部分之下。

1. 我尝试使用CSS对齐所有4个，并且所有按钮都正确对齐，而VK按钮刚刚移位到新行。以下是我尝试这样做的方法：

#Social { text-align: center; margin-bottom: 20px;

1. 尝试使用基本HTML <center></center>并且相同的故事前3个按钮对齐，VK按钮转到新行。

以下是VK按钮的代码： <div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button", height: 20}); </script>

希望你能帮助我解决这个问题。提前谢谢！

Answer 1

这是因为VK代码将您的按钮包装在div标签中，这是一个块元素。要解决此问题，您必须将div替换为span（保持ID相同），或者如果这样做不起作用，因为JavaScript看起来很明显是具有该ID的div，那么按照罗伯特的建议：将div设置为显示内联块，告诉浏览器将块元素呈现为内联元素。

Answer 2

#vk_like { display: inline-block; }？