在同一行显示两个小部件答案

【问题标题】：To Display two widgets in the same line在同一行显示两个小部件
【发布时间】：2017-03-23 15:22:39
【问题描述】：

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

这是显示小部件的代码。

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

.share_icon{
white-space: nowarap;
}

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

【问题讨论】：

你的意思是水平还是垂直在同一行？这就是我在我的网站中粘贴代码时获得小部件的方式。 imgur.com/a/4SsWr
将这个锚标签包装在 div 中并设置它的样式 display:inline-block;@user3402248

标签： css wordpress twitter linkedin

【解决方案1】：

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

以及更多关于 spans 的链接https://www.tutorialspoint.com/html/html_span_tag.htm

【讨论】：