在同一行显示两个小部件

Question

我在 WordPress 页面上有一个 Twitter 和一个 LinkedIn 共享小部件。我试图在同一行中显示这两个小部件，但徒劳无功。

这是显示小部件的代码。

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

我尝试对其应用 CSS class

.share_icon{
white-space: nowarap;
}

但它仍然没有水平对齐。请帮忙。

Answer 1

将两个小部件包围在一个范围内。跨度用于内联元素。这是一个 fiddle 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>

和 link 到更多跨度 https://www.tutorialspoint.com/html/html_span_tag.htm

在同一行显示两个小部件

To Display two widgets in the same line

css

twitter

wordpress

linkedin