Javascript CSS浮动在同一行可变金额上

我想有一个水平列表，可以运行尽可能广泛，但在一个固定宽度的容器。我使用jQuery允许在真正广泛的列表上滚动，并且溢出：对于没有javascript的用户来说是自动的

我有这样的代码：

<div class="list"> 
    <ul> 
        <li class="feed"> 
            <section> 
                <h1><span class="name">Title</span></h1> 
                <div class="scroll_left"><a class="ir" href="#">Scroll Back</a></div> 
                <div class="article_list"> 
                    <ul class="article_list"> 
                        <li> 
                            <a href="article.php"> 
                                <div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div> 
                                <h2>Title of article</h2> 
                            </a> 
                        </li> 
                        <li> 
                            <a href="article.php"> 
                                <div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div> 
                                <h2>Title of article</h2> 
                            </a> 
                        </li> 
                        <li> 
                            <a href="article.php"> 
                                <div class="article_thumb"><img src="img/placeholder.png" alt="blah" /></div> 
                                <h2>Title of article</h2> 
                            </a> 
                        </li>
                        <!-- variable number of li's, from 10s to 100s -->
                    </ul>
                </div>
            </section>
        </li>
        <!-- More of these lists -->
    </ul>
</div>

我的javascript是：

$(document).ready(function() {
    $('div.article_list').css({
        'overflow' : 'hidden'
    });

    $('.scroll_left a').click(function() {
        toScroll = $(this).parent().next();
        toScroll.animate({scrollLeft: "-=135"});
        return false;
    });

    $('.scroll_right a').click(function() {
        toScroll = $(this).parent().prev();
        toScroll.animate({scrollLeft: "+=135"});
        return false;
    });

});

因此，我要么将内部ul设置得很宽，这样用户就可以滚动到列表项之外，要么我可以限制它，但是如果我添加了太多的项（动态地，所以我没有太多的控制），那么布局就会中断

我能不能让那个可滚动的区域和它浮动的内容一样宽？

---

还是用javascript设置宽度的唯一解决方案（不太理想，但我能做到）？

这是

.feed.article\u list

上的

float:left

，您确实不想要，但我已经尽可能将其从所有页面中删除了

我将移动到内联设置，而不是浮动：

.feed .article_list {
    position: relative;
    overflow: auto;
    width: 100%; /* specify what ever width you want. I think 100% is proper. */
}

.feed .article_list ul {
    position: relative;
    overflow-x: scroll;
    margin: 0;
    background-color: #ffffff;
    white-space: nowrap;
}

通过使

overflow-x:scroll

具有永久滚动条（并非完全必要，如果愿意，可以将其删除）。

空白：nowrap

将使子项保持在一行上（而不是浮动）

在子项

显示上：内联块

将允许您像块元素一样指定高度/宽度，并同时使它们保持内联

JsFiddle:-

更新：-

为了使其跨浏览器兼容，请进行以下更改： 从

.feed.article\u列表中删除
溢出：auto
并加上：

.feed
{
    overflow: hidden;
}
.article_list
{
    overflow: auto;

来自quirksmode.com：


：
空白：nowrap
与IE7+兼容
- 
谢谢！现在，浏览器对此的支持是什么？我可以放弃IE6和旧的浏览器，但我希望它能在现代浏览器中工作。我可以在自己的时间测试，除非你马上有答案。@Matt-um。。。浏览器支持。。。我通常只担心IE8+（因为XP不能再高了）。我添加了一个更新，我认为应该使它更跨浏览器。但没有承诺。抱歉。@Matt初始测试在IE7中不起作用。如果您想支持IE7，与原始版本相比，此版本的区别在于删除了
提要.article\u list
上的
float:left
和
上的
overflow-x:scroll
。article\u list ul
.feed .article_list li {
    display: inline-block;
    // etc. etc. etc. ...

.feed
{
    overflow: hidden;
}
.article_list
{
    overflow: auto;