Question

我需要以下JS Twitter小部件与“TEST MESSAGE”文本显示在同一行，但它总是创建换行符，此代码显示为三行。

TEST MESSAGE<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 10,
  interval: 30000,
  width: 370,
  height: 500,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#e8e8e8',
      color: '#000000',
      links: '#005eff'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'default'
  }
}).render().setUser('ControllerShop').start();
</script>TEST MESSAGE

Answer 1

Twitter小部件呈现为<div>，它是一个块元素，因此默认情况下就是这样（就像<p>或<blockquote>之类的任何其他块元素一样。要使其与文本内联显示，请尝试：

.twtr-widget {
  display: inline-block;
}

您可以在行动in this fiddle中看到它（确保“结果”窗格足够宽以容纳所有内容）。

为什么你想要这样做并不是很清楚，所以我对你的大用例感到好奇，但无论如何这都做了。

JS Twitter小部件总是创建新的换行符，需要在同一行

1 个答案: