javascript - CSS float 在同一行可变数量

Question

我想要尽可能宽但在固定宽度容器内的水平列表。我正在使用 jQuery 来允许在非常宽的列表上滚动，并且 overflow:automatic 对于没有 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>

我将只提供我认为相关的 CSS 子集:

.feed .article_list {
    position: relative;
    overflow: auto;
    float: left;
    width: 900px;
}

.feed .article_list ul {
    position: relative;
    width: 10000px; /** I want this to be wide, but not allow scrolling past the end*/
    margin: 0;
    background-color: #ffffff;
}

.feed .article_list li {
    display: block;
    width: 130px;
    height: 150px;
    position: relative;
    float: left;
    border-right: 2px solid #b5e8f4;
    border-left: 2px solid #b5e8f4;
    margin: 0 5px 0 0;
}

我的 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 非常宽，以便用户可以滚动到列表项之外，要么我可以限制它，但如果我添加太多项(动态地，所以我没有很多控制)，然后布局中断。

我能否以某种方式使可滚动区域与其 float 内容一样宽？ 或者是在 javascript 中设置宽度的唯一解决方案(不太理想，但我可以做到)？

Answer 1

它是 .feed .article_list 上的 float: left，您真的不想要它，但我已经尽可能地从它们中删除了它。

我会转向内联设置而不是 float 设置:

.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，你有一个永久的滚动条(不是完全必要的，如果你愿意，它可以被移除)。 white-space: nowrap 将使 children 保持在一行上(而不是 float 。)

.feed .article_list li {
    display: inline-block;
    // etc. etc. etc. ...

在子级 display: inline-block; 上，您可以像 block 元素一样指定高度/宽度，同时让它们保持内联。

JsFiddle:- http://jsfiddle.net/GBtCb/

更新:-

为了使其跨浏览器兼容，请进行以下更改: 从 .feed .article_list 中移除 overflow: auto 并添加:

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

来自 quirksmode.com:

• > http://www.quirksmode.org/css/whitespace.html : white-space: nowrap 兼容 IE7+。
-