时间戳

首页 > 解决方案 > 如何将所有社交媒体按钮放在一条线上

html - 如何将所有社交媒体按钮放在一条线上

问题描述

我为我的网站编写了 HTML 代码来显示社交媒体按钮。这是我的代码。

<a href="https://www.linkedin.com/in/manulimanawadu/">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTofwQKKw9lPFjwjnV0tCtz9575RJYAieEtUKop8H3fmU-uWRNetA" alt="submit to reddit" width="30" height="30" border="0"></a><a href="https://www.facebook.com/manulipiyalka.manawadu">
<img src="http://icons.iconarchive.com/icons/yootheme/social-bookmark/256/social-facebook-box-blue-icon.png" alt="submit to reddit" width="30" height="30" border="0"></a><a href="https://stackoverflow.com/users/5808332/manuli-piyalka">
<img class="alignnone" src="https://ih1.redbubble.net/image.423192949.8659/mp,550x550,matte,ffffff,t.3u1.jpg" alt="submit to reddit" width="30" height="30" border="0"></a><a href="https://plus.google.com/u/1/?tab=mX">
<img class="alignnone" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQenywtsd-Mnhvg8VOhvU4wxruIn3zjvPKz69gafQQVS-e9fGUc" alt="submit to reddit" width="28" height="26" border="0"></a><a href="https://twitter.com/piyalka">
<img class="alignnone" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTiVU8-w06xNJCCOPoOwfugQUHhuyFoqYs0YsxZ9zgXkVrcXDtU" alt="submit to reddit" width="24" height="24" border="0"></a>

在这种情况下，我的社交媒体按钮不会出现在一行中。

oic

我怎么能把所有的按钮放在一条线上？

此致，

标签： htmlwordpresscss

解决方案

默认情况下img，元素是内联的，并且会与提供的代码一起出现在一行中。在您的 WP 主题中必须有一些 CSS 规则使它们成为块元素（通过应用display: block）或浮动并同时清除它们（float: left; clear: left）。因此，您必须找出这些设置中的哪些适用并使用 CSS 规则覆盖它们。

例如，您可以为每个img包含以下内容的元素添加一个自定义类：

.my_sm_buttons {
  display: inline-block;
  float: none;
  clear: none;
}

在您的 HTML 中，您将删除alignnone类并添加class="my_sm_buttons"每个img标签。所以例如第一个img标签看起来像

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTofwQKKw9lPFjwjnV0tCtz9575RJYAieEtUKop8H3fmU-uWRNetA" alt="submit to reddit" width="30" height="30" border="0" class="my_sm_buttons">

这可能有点太多（即内联块和浮动重置），但它应该可以工作。如果没有，您仍然可以添加!important到每个设置中，例如

.my_sm_buttons {
  display: inline-block !important;
  float: none !important;
  clear: none !important;
}

推荐阅读