我已经为我的网站编写了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>
在这种情况下,我的社交媒体按钮未显示在一行中。
如何将所有按钮都放在一行中?
最好的问候
答案 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>