Question

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

在这种情况下，我的社交媒体按钮未显示在一行中。

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

最好的问候

Answer 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;
}

Answer 2

您需要使用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>

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

2 个答案: