开发者

JS Twitter Widget Always Creates New Line Break, Need On Same Line

开发者 https://www.devze.com 2023-04-12 05:25 出处:网络
I need the following JS Twitter widget to appear on the same line as the \"TEST MESSAGE\" texts, however it always creates a line break and this code appears as three lines.

I need the following JS Twitter widget to appear on the same line as the "TEST MESSAGE" texts, however it always creates a line break and this code appears as three lines.

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


The Twitter widget renders as a <div>, which is a block element and so behaves this way by default (just like any other block element like <p> or <blockquote>). To make it display inline with the text try:

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

You can see it in action in this fiddle (make sure the "Result" pane is wide enough to accommodate everything).

It's not really clear why you'd want to do this so I'm curious about your larger use case, but this does the job anyway.

0

精彩评论

暂无评论...
验证码 换一张
取 消