CODEWITHSUNDEEP
htmlwordpresscss
TesterABC
TesterABC

Reputation: 1226

How to put all social media buttons on one line

I have written HTML code for my website to display social media buttons. Here is my code.

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

In this case my social media buttons are not appearing in one line.

oic

How could I put all the buttons into one line?

best regards,

Upvotes: 0

Views: 2393

Answers (2)

Johannes
Johannes

Reputation: 67778

By default img elements are inline and would appear in one line with the provided code. There must be some CSS rule in your WP theme which either makes them block elements (by applying display: block) or floats and clears them at the same time (float: left; clear: left). So you have to find out which of these settings apply and overwrite them with a CSS rule.

You could for example add a self-defined class to each img element which contains something like:

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

And in your HTML you would remove the alignnone classes and add class="my_sm_buttons" in each img tag. So the first img tag for example would look like

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

That might be a bit too much (i.e. the inline-block and float reset), but it should work. If it doesn't, you could still add !important to each of those settings, like 

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

Upvotes: 1

Zubair Arif
Zubair Arif

Reputation: 90

You need to use css to float left:

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

Upvotes: 0

Related Questions