0

ビューポートサイズの100%でli要素を表示したい。ここで質問から解決策を見つけましたが、私のニーズには十分ではありません。つまり、ブラウザのサイズが変更されても、 li 要素を 100% 幅のままにしたいのです。純粋なcssのみを使用することは可能ですか? または、追加の JavaScript コードを使用する必要がありますか? ありがとう。

4

1 に答える 1

1

他の投稿をフィドルに入れて確認しましたが、問題なく動作しています。正しいパラメーターをすべて使用していますか?

div {overflow:auto;width:100%;}
ul {margin:0;padding:0;white-space:nowrap;}
li {width:100%;display:inline-block;}

http://jsfiddle.net/PDVEM/1/

編集：あなたのコメントに答えるために、スクロールバーの位置とウィンドウサイズを純粋なcssと同期できるかどうかはわかりませんが（おそらくいくつかのtext-align：center;トリックを使用して）、javascriptで可能です：

//store the current scroll value
div.scroll(function(){
    currentScrollPos = div.scrollLeft();
    currentLi = (currentScrollPos/divWidth);
})

//on resize re-positions the scrollbar        
$(window).resize(function(){
     divWidth = parseInt(div.css('width'));
     newScrollPos = currentLi*divWidth;
     div.scrollLeft(newScrollPos);
})

完全な例については、このフィドルを参照してください。

http://jsfiddle.net/PDVEM/3/

于 2012-11-27T09:24:14.127 に答える