Question

我希望水平列表尽可能宽，但在固定宽度的容器中。我使用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>

我只会给出我认为相关的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非常宽，所以用户可以滚动到列表项之外，或者我可以限制它但是如果我添加了太多项（动态，所以我没有很多控制），然后布局中断。

我可以以某种方式让可滚动区域与其浮动内容一样宽吗？或者是在javascript中设置宽度的唯一解决方案（不太理想，但我可以这样做）？

Answer 1

你float: left上的.feed .article_list是你真正不想要的，但我已将它从所有这些中删除了。

我会转移到内联设置而不是浮动：

.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会将孩子保持在一条线上（而不是浮动。）

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

子项display: inline-block;上的

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

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

更新： -

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

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

来自quirksmode.com：

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

CSS浮动在同一行变量上

1 个答案: