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 回答