1

と並べて配置されたインラインブロックのリストがありwhite-space: nowrapます。これらの要素は画面からはみ出して、スクロールできるようにする必要がありますoverflow-x: scroll。

これらのインライン ブロックのコンテンツには、縮小された要素が含まれていることに注意してください。これは、リスト項目自体が縮小されないため、スクロールバーが下すぎることを除いて、うまく機能します。リスト自体をスケーリングしただけでも意味がありますが、リスト項目にはスケーリングされないはずのアイテムが含まれています。

<div id="container">
<ul id="list">
    <li>
        <span>ABC</span>
        <div class="scale">
            <div class="big-block"></div>
        </div>
    </li>
    <li>
        <span>ABC</span>
        <div class="scale">
            <div class="big-block"></div>
        </div>
    </li>
            ...

これは、この問題を示す簡略化されたテスト ケースです。.

代わりにフロートを使用してこれを実行しようとしましwhite-space: nowrapたが、スクロールバーを正しく配置しました (要素がドキュメントフローから削除されたためと思われます) が、コンテナーに大きな幅を設定しない限り、フロートが折り返されます。これは chrome では機能しますが、firefox ではコンテナーの内容に依存しない長いスクロールバーが表示されます。

どうすれば目的の効果を達成できますか?

4

1 に答える 1

0

Webkit 変換は、ドキュメントが適切に流れるように dom 要素のサイズを変更しません。それを回避するには、親コンテナーで JavaScript を使用する必要があります。

var scaleFactor = 0.5;
var elements = document.getElementsByClassName('scale');
for(var i = 0, length = elements.length; i < length; i++) {
  // noprotect

  elements[i].style.width = (elements[i].offsetWidth * scaleFactor) + 'px';
  elements[i].style.height = (elements[i].offsetHeight * scaleFactor) + 'px';

}

http://jsbin.com/OnAZIzo/9/

于 2013-11-13T03:45:44.057 に答える