Javascript 使用JS循环列表，同时与文本保持一致

关于我在这里看到的问题：

在使用js循环浏览列表时遇到问题，同时使列表与某些文本保持一致。向左浮动文本解决了这个问题，直到我必须格式化文本/列表并将其居中

到目前为止，我所拥有的： 试图实现类似以下目标：

由于某种原因，列表会追加，导致文本显示在列表的略下方。目标是让列表直接出现在列表旁边（在我的例子中是左边）

一些文字

3
二,
一,

#股票行情{
高度：40px；
溢出：隐藏；
列表样式类型：无；
列表样式位置：oustide；
填充：0；
显示：内联块；
}
#李先生{
高度：40px；
}
#正文{
显示：内联；
}
函数tick（）{
$（“#ticker li:first”）.animate（{'opacity'：0}，200，function（）{$（this）.appendTo（$（'ticker'））.css（'opacity'，1）；}）；
}
setInterval（函数（）{tick（）}，4000）；

HTML：

<div class="center">You ate an <span id="text"></span>.</div>

<div class="center">You ate an <span id="text"></span>.</div>

var i = 0,
    texts = ['apple', 'banana', 'orange'];

function cycleText() {
    $("#text").text(texts[i]);
    if ((i += 1) === texts.length) {
        i = 0;
    }
}
cycleText();
setInterval(cycleText, 1000);