user3402248 user3402248 - 1 month ago 29
CSS Question

To Display two widgets in the same line

I have a Twitter and a LinkedIn Share Widget on a WordPress page. I am trying to display the two widgets in the same line but in vain.

Here is a Screenshot

This is the code for displaying the widgets.

<a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/Share" data-counter="top"></script>


I tried applying a CSS class to it

.share_icon{
white-space: nowarap;
}


But it still doesn't align horizontally. Kindly Help.

Answer

Surround both widgets in a span. spans are used for inline elements. here is a fiddle for it https://jsfiddle.net/wnsg3js0/

<span>
  <a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script><script type="IN/Share" data-counter="top"></script>
</span>

and a link to more on spans https://www.tutorialspoint.com/html/html_span_tag.htm