html - Css 缩放元素和强制容器元素折叠到适当的大小

Question

我有一个内联 block 列表，它们与 white-space: nowrap 并排排列。这些元素应该拉伸(stretch)到屏幕之外，并且可以使用 overflow-x: scroll 进行滚动。

需要注意的是，这些内联 block 的内容包含按比例缩小的元素。这很好用，除了列表项本身不会缩小，因此滚动条向下太远。如果我只是缩放列表本身但列表项包含一些不应该缩放的项，那将是有意义的。

<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>
            ...

Here is a reduced test case demonstrating the issue. .

我试图用 float 而不是 white-space: nowrap 来做到这一点，我让滚动条正确定位(我认为可能是因为元素从文档流)但是除非我在容器上放一个高宽度，否则 float 会换行。这会在 chrome 上工作，但会在 firefox 上导致令人讨厌的长滚动条，它不依赖于容器内容。

如何达到预期的效果？

Answer 1

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/