如何在iScroll中为滚动条设置动态宽度？

Question

在这个例子中,http://bit.ly/t2ImYS所有元素的包装宽度都是固定的8520px

#scroller {
width: 8520px;
height: 100%;
float: left;
padding: 0;}

我想要width动态,所以如果我在<div id="scroller">#scroller中添加更多元素,应该在其中的元素上取宽度.

所以试着设置宽度

#scroller {
    width: 100%;}

和

 #scroller {
    width: auto}

但是滚动器无法正常工作.

有没有办法让width在%与正常工作卷轴？

Answer 1

• 将li元素设置为display:inline-block; 并删除浮动:左; (你也可以删除vertical-align,因为这只适用于table-cell元素)

• 从包装中移除固定宽度.

• 添加白色空间:nowrap; 到了ul

• 你应该没事......

(除了<= ie7,但我认为你的情况没问题？)

#scroller li {
    display: inline-block;/* changed */
    /*float:left; */   /* deleted */
    padding: 0 10px;
    width: 120px;
    height: 100%;
    border-left: 1px solid #CCC;
    border-right: 1px solid white;
    background-color: #FAFAFA;
    font-size: 14px;
}
#scroller ul {
    list-style: none;
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
    white-space:nowrap; /* added */
}
#scroller {
    /* width: 8520px; */   /* deleted */
    height: 100%;
    float: left;
    padding: 0;
}