Javascript 如何在div中动态添加更多宽度？

我已经用jQuery UI创建了一个时间线。我的问题是：如果我用图像和文本添加更多的年份，如何在div中动态添加更多的空间？在这种情况下：

#timline

。当我增加更多年数时，问题就出现了，我需要更改时间线内的宽度。设置为3000px以上。我怎样才能防止这种情况？这是一份关于这个案子的报告

HTML:

<div id="timeline-container">
    <div id="timeline-header">
        <h1>Journey</h1>
        <h2>Show years</h2>
    </div>
    <div id="slider"></div>
    <ul id="timeline">
        <li class="element">
            <img src="img/ikon_lampa_1.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2008</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
                </li>
            </ul>
        </li>
        <li class="element down">
            <img src="img/ikon_tumme_upp_3.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2009</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
                </li>
            </ul>
        </li>
        <li class="element">
            <img src="img/ikon_folk_3.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2010</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
                </li>
            </ul>
        </li>
        <li class="element down">
            <img src="img/ikon_fondforsiktig_4.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2011</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span>
                </li>
            </ul>
        </li>
        <li class="element">
            <img src="img/ikon_ballong_1.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2012</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span>
                </li>
            </ul>
        </li>
        <li class="element down">
            <img src="img/ikon_allralogga_2.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2013</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span>
                </li>
            </ul>
        </li>
        <li class="element">
            <img src="img/ikon_pekare_3.png" alt="Allra" />
            <ul>
                <li class="text">
                    <h3>2014</h3><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</span>
                </li>
            </ul>
        </li>
    </ul>
</div>

Javascript

$(function () {
    var scrollPane = $("#timeline-container"),
        scrollContent = $("#timeline");

    var scrollbar = $("#slider").slider({
        slide: function (event, ui) {
            if (scrollContent.width() > scrollPane.width()) {
                scrollContent.css("margin-left", Math.round(
                ui.value / 100 * (scrollPane.width() - scrollContent.width())) + "px");
            } else {
                scrollContent.css("margin-left", 0, "left", 0);
            }
        }
    });
});

给你

#timeline {
  display: -webkit-inline-box;
  overflow-y: hidden;
  width: auto;
  height: 480px;
  padding: 0px;
}

并为类似firefox的应用程序添加显示属性 显示：-moz内联框；

---

或者类似的东西，我相信默认情况下，div会扩展自己以适应其内容。只是不要为它们定义

宽度

。我试过了，但li元素会以垂直线而不是水平线结束…将

lis

显示设置为
内联
。我也试过了，在这种情况下没有帮到我。。。如果您成功做到了这一点，请共享一个工作小提琴这两个不一起工作：
位置：绝对和
显示：内联成功了！但由于某种原因，2014年没有出现。为什么呢？是因为我在元素类上设置了“左”吗？我想是的。尝试使用左边距代替，或者最好在父元素上使用填充。谢谢！这真的发生了！出于某种原因，jQuery UI滑块在Mozilla和IE中不起作用，因为显示：-webkit内联框，即使我添加了-moz内联框。。。
#timeline {
  display: -webkit-inline-box;
  overflow-y: hidden;
  width: auto;
  height: 480px;
  padding: 0px;
}