javascript - Textillate 单词循环显示在行中

Question

我正在尝试创建一个循环单词的 textilate.js 代码。我来到了一些代码，但我还没有，因为我的p标签和保持循环的单词必须在同一行。最好，'text' 和 'blabla' 之间的空间应该有一个固定的宽度。

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>标签占满了宽度，因此它们在下降。