jQuery smooth div 滚动不滚动动态创建的段落标签

Question

我正在构建一个股票代码，我正在尝试使用 Smooth Div Scroll插件，但我无法让它与动态创建的段落标签一起使用。它不是创建滚动的水平列表，而是将 P 标签垂直转储到页面上。如果段落标签是静态添加的，它们会正确定位和滚动。当我在 Firebug 中比较静态版本和这个动态版本时，html 看起来一样，所以我猜这是一个 CSS 问题，但我没有任何运气。

编辑:这是一个jsFiddle

有什么建议吗？谢谢

这是代码

$(window).load(function () {
        var $divScrollableArea = $(".scrollableArea");
        var $stocks = new Array("GOLD", "SSRI", "PTM", "PAL", "USD", "SH", "DJI");

        $.each($stocks, function (index, item) {
            var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22" + item + "%22)%0A%09%09&&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
            $(function () {
                var jqxhr = $.getJSON(url, function (json) {
                    $divScrollableArea.append("<p>" + item + "<br /><span class='left'>" + json.query.results.quote.BidRealtime + 
                        "</span><span class='right'>" + json.query.results.quote.Change_PercentChange + "</span></p>");
                })
                .success(function () { BuildScroll(); });
            });
        });
        function BuildScroll() {
            $("div#scrollingText").smoothDivScroll({
                autoScroll: "always",
                autoScrollDirection: "endlessloopright",
                autoScrollStep: 1,
                autoScrollInterval: 15
            });
        }
    });


<style type="text/css">
    .stock
    {
        font: bold .8em Verdana;
        padding: 5px;
        width: 100%;
    }
    .innerStock
    {
        float: left;
        margin-right: 20px;
    }
    .left
    {
        font: normal .7em Verdana;
        text-align: left;
        width: 30%;
        padding-right: 15px;
    }
    .right
    {
        font: normal .7em Verdana;
        text-align: right;
        color: red;
    }
    #scrollingText
    {
        width: 100px;
        height: 35px;
        border: solid 1px #ccc;
        position: relative;
        padding: 2px 0px;
    }

    #scrollingText div.scrollableArea p
    {
        display: block;
        float: left;
        margin: 0;
        padding-right: 7px;
        padding-top: 1px;
        font-family: Courier, Arial, Sans-Serif;
        font-size: 12px;
        line-height: 12px;
        font-weight: normal;
        background-color: #fff;
        color: #000;
        white-space: nowrap;
        width:300px;
    }
</style>

<div id="scrollingText">
    <div class="scrollWrapper">
        <div class="scrollableArea">
        </div>
    </div>
</div>

Answer 1

你是对的，这是一个 CSS 问题。

更具体地说，是 #scrollingText 的宽度 (100px) 导致了换行。如果您删除此属性，您的段落将 float (减少段落的宽度也是有好处的)。

如果你想保持 #scrollingText 的大小固定，你需要为 div.scrollWrapper 定义样式，如下所示:

div.scrollWrapper {
    display: block;
    width: 800px;
}

只需确保宽度大于所包含段落的所有宽度之和即可。我已经更新了你的 fiddle (不是我也调整了段落的宽度):http://jsfiddle.net/RZBUJ/2/