Textillate字循环显示在行

Question

我正在尝试创建一个循环单词的textilate.js代码。我已经找到了一些代码，但我还没有，因为我的p标签和保持循环的单词必须在同一行。优选地，文本之间的空间为＆＃39;和＆＃39; blabla＆＃39;应该有一个固定的宽度。

Demo

$('.texts').textillate({
minDisplayTime: 1000, 
in: { effect: 'flipInY', sync: true }, 
out :{  delay: 3, effect: 'lightSpeedOut', sync: true},
loop: true });




<p> text</p> <ul class="texts">
        <li>Some Title</li>   
        <li>Another Title</li>
        <li>Yet another</li>
    </ul> 
  <p>
   bla bla
  </p>

Answer 1

请参阅此fiddle

请按以下方式更新您的CSS

.texts {
  display: inline-block;
  padding: 0;
}
p{
  display:inline-block;
}

您的代码存在的问题是<p>代码占据了整个宽度，因此它们正在下降。