表示にもかかわらず、リストに動的に追加された箇条書きが表示されます。インライン

Question

私は垂直リストを使用して無限スクロールギャラリーを実装しようとしています。

スタイルシートでdisplay:inlineを使用していたにもかかわらず、いくつかの奇妙な理由で新しい箇条書きが下に折り返されていました。 white-space:nowrapを使用しても役に立ちませんでした。ついに画像に切り替える必要があった。

これはなぜ起こっているのですか？

<div id="wrapper"> 
    <ul id="slides"> 
      <li id="randomPick"><img src="http://www.domain.com/images/blah/filename.jpg" height="120" class="image"/></li> 
    </ul> 
</div> 

---

li { 
    list-style: none; 
    display: inline; 
    /* float:left; */ 
} 

#wrapper { 
    position: relative; 
    overflow: scroll; 
    width: 600px; 
    height: 150px; 
    left: 21px; 
    top: 5px; 
    overflow-y: hidden; 
    /* width:auto */ 
    white-space:nowrap; 
} 

#slides { 
    position: absolute; 
} 

#slides li { 
    float: left; 
    height: 140px; 
    /* width: 200px; */ 
    padding-left:5px; 
} 

---

$("#wrapper").scroll(function() { 
        var right = $(".randomPick:last").offset().left + $(".randomPick:last").outerWidth(); 
        if(right < 1000){ 
         // Test 
         $("#wrapper ul").append("<li class="randomPick"><img src='http://www.domain.com/images/blah/filename.jpg' height='120' class='image'/></li>"); 
        } 
       } 
      ); 

Answer 1

あなたは、水平方向のスクロールを強制するために、あなたのULタグの幅を大きくする必要があります。あなたはそれを任意に高い数値に設定できますが、コンテンツがオーバーフローしなくてもスクロールがそこに存在することになります。

各liの正確な幅がわかっている場合は、jQueryを使用して各追加/削除時に幅のCSS属性をプログラムで変更することができます。

liの幅が動的な場合は、clientWidthプロパティとclientHeight DOMプロパティを使用して幅の高さを取得できます。