如何将所有社交媒体按钮都放在一行上

时间:2018-09-23 13:37:56

标签: html wordpress css3

我已经为我的网站编写了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

如何将所有按钮都放在一行中?

最好的问候

2 个答案:

答案 0 :(得分:1)

默认情况下,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;
}

答案 1 :(得分:0)

您需要使用CSS向左浮动:

<div class="social-icons">
    <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.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>
</div>


<style type="text/css">
    .social-icons img{
        float: left;
    }
</style>