5

この例では、 http：//bit.ly/t2ImYSすべての要素のラッパーの幅が固定されています8520px

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

動的にしたいので、この#scrollerwidth内に要素を追加すると、その中の要素の幅を取得する必要があります。<div id="scroller">

だから幅を設定してみました

#scroller {
    width: 100%;}

と

 #scroller {
    width: auto}

しかし、スクローラーは正しく機能しません。

正しく機能するスクロールを使用widthする方法はありますか？%

4

5 に答える 5

11

  • li 要素を display:inline-block; に設定します。float:left; を削除します。(table-cell 要素でのみ機能するため、vertical-align を削除することもできます)

  • ラッパーから固定幅を削除します。

  • 空白を追加: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;
}
于 2011-12-12T09:35:42.167 に答える
2

Display:inline-block を使用し、パーセンテージを使用するとうまくいきました:

#scroller li {
 height: 100%;
 width: 2%;
 display: inline-block;
}

#scroller ul {
 list-style: none;
 display: block;
 float: left;
 width: 100%;
 height: 100%;
}

#scroller {
 width: 5000%;
 height: 100%;
 float: left;
}
于 2012-12-03T16:28:17.953 に答える
2

iScroll4 を使用している場合は、スクローラーを更新するか、破棄して再作成する必要があります。

ここからの抜粋: 「iScroll は、ラッパーとスクローラーの両方の正しいサイズを知る必要があります。それらは起動時に最初に計算されますが、コードが要素のサイズを変更する場合、iScroll は DOM をいじっていることを警告する必要があります。 ."

于 2012-01-24T09:24:11.570 に答える
1

refresh()スクローラー内に動的アイテムを追加して幅を設定した後、iscroll メソッドを呼び出してみてください。

于 2012-05-23T05:57:54.697 に答える