水平列表使用CSS滚动 [英] Horizontal List Scrolling with CSS

问题描述

我想创建一个类似于netflix上看到的列表的水平滚动条。这是html的基本设置：











$ b

这张图片我将用来解释我的努力：

上面的设置是我想要的：scrolling_list有一个设置宽度（我设置它可以说是300px）。然后，在这个div里面我有一个列表滚动器，它将托管多个名为outer_list的子项。上面的设置显示了list_scroller的宽度是如何随着孩子的数量而扩大的（1000,1300,1600或者取决于孩子的数量）。

不幸的是，我无法弄清楚如何用css做到这一点..现在，除非我指定了list_scroller的宽度，否则它的宽度将不会展开（它将假定第一个子元素的宽度）。相反，list_scroller假定这个较短的宽度，然后孩子最终水平堆叠。

任何人都可以帮我解决这个问题吗？这里是当前的CSS：

  .scrolling_list {
 overflow：auto; 
 overflow-y：hidden; 
职位：亲属; 
 width：360px; 
} 
 .list_scroller {
 position：relative; 
 display：block; 
 overflow-x：auto; 
 overflow-y：hidden; 
 padding：10px; 
 height：360px; 
} 
 .list_scroller .outer_list {
 width：260px; 
 display：inline-block; 
 
  

解决方案

跟踪！我认为不应该设置 overflow：auto; 和 overflow-y：hidden; ，你应该设置整个溢出隐藏，并给list_scroller更大的宽度。像这样的东西可能会工作：

http：// jsfiddle .net / mEg7g / 1 /

祝你好运，我希望这有助于你。 ：D

I want to create a horizontal scroller similar to those lists seen on netflix. This is the basic set-up of the html:

This is an image that I will use to explain my efforts:

The upper set-up is what I want: scrolling_list has a set width (i set it to, say, 300px). Then, inside this div I have a list scroller that will host multiple children called outer_list. The upper setup shows how the list_scroller will have a width expanding with the number of children (1000, 1300, 1600 or whatever depending on the number of children).

Unfortunately, I can't figure out how to do this with the css.. right now, unless I specify the width of list_scroller, its width won't expand (it'll assume the width of the first child). Instead, the list_scroller assumes this shorter width and then the children end up stacking horizontally.

Can anyone help me fix this? Here is the current css:

.scrolling_list {
    overflow:auto;
    overflow-y:hidden;
    position:relative;
    width:360px;
}
.list_scroller {
    position:relative;
    display:block;
    overflow-x:auto;
    overflow-y:hidden;
    padding:10px;
    height:360px;
}
.list_scroller .outer_list {
    width:260px;
    display:inline-block;
}

解决方案

You're on the right track! I think instead of setting overflow: auto; and overflow-y: hidden;, you should just set the whole overflow to hidden, and give the list_scroller a bigger width. Something like this might work:

http://jsfiddle.net/mEg7g/1/

Good luck, I hope this helps. :D

这篇关于水平列表使用CSS滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！