代码之家 › 专栏 › 技术社区 › TesterABC

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

css3 wordpress html

0

TesterABC · 技术社区 · 7 年前

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

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

我怎么能把所有的按钮放在一行呢?

2 回复 | 直到 7 年前

1

Johannes 7 年前

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

2

0

Zubair Arif 7 年前

<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>