Question

在我的个人网站上，我试图添加一些链接到我的其他在线配置文件的小按钮（linkedIn，StackOverflow等）。

我已将html添加到主页侧栏中的Text小部件。按钮按预期工作。

虽然我遇到麻烦但是这些按钮都在同一条线上 - 而且我不能为我的生活弄清楚为什么他们在不同的路线上。

我使用的HTML代码是：

<!-- LinkedIn Piece -->
<a href="https://nz.linkedin.com/pub/samuel-passmore/59/403/70a" style="text-decoration:none">
<img src="https://static.licdn.com/scds/common/u/img/webpromo/btn_in_20x15.png" width="30" height="22.5" border="0" style = "border-radius: 0em"></a>
<!-- StackOverflow Piece -->
<a href="http://stackoverflow.com/users/1544746/sampassmore" style="text-decoration:none;width: 30px">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" width="30" height="22.5"></a>

您可以在我的网页上看到当前结果 www.sampassmore.com

我认为我已将问题缩小到img标签的边缘，但将它们设置为0px似乎没有做任何事情。

有没有人有任何其他建议？

Answer 1

向3个小部件添加一个类，然后添加display：inline-block属性。您需要该属性来更改标记的大小并正确显示它们。例如：

a.social-icons {
    display: inline-block
}

文本小部件中的图像始终位于不同的行上

1 个答案: