Question

我正在尝试制作HTML“展示”。我正在考虑使用这样的元素：

<div id="index-showcase-tabs">
    <div id="index-showcase-tabslide">                    
        <div class="index-showcase-tab" id="showcase-tab-1">Item1</div>
        <div class="index-showcase-tab" id="showcase-tab-2">Item2</div>
        ...
        <div class="index-showcase-tab" id="showcase-tab-N">ItemN</div>
    </div>
</div>

展示品左侧浮动，我不知道它们的精确宽度，也不知道它们的数量。问题是：如果项目的组合宽度大于容器（index-showcase-tabs），我不希望它们断行（默认情况下它们会这样做）。我希望它们在一行中，我想隐藏溢出，然后让用户使用javascript滚动它们（而不是通过滚动条...）。

我该怎么做？

PS：这些物品还没有太多的CSS。我只给了滑块一个特定的高度：

#index-showcase-tabslide
{
    height: 34px;
}

修改： Here you can see my problem。
Edit2：用小提琴解释更多内容：http://jsfiddle.net/TbSfj/19/

Answer 1

为此，您无法使用float: left。而是使用display: inline - 这对你想要完成的事情具有相同的效果，并且它不会被限制在DOM模型中的父div。

Answer 2

看看这个性感的控制：

http://jsfiddle.net/SoonDead/U6QdQ/20/

这种方式适用于我的项目，但我认为它可以满足您的需求。

技巧是：

因为你使用了许多可以“换行”但甚至强行禁用换行符的字符在1-2浏览器中有不同的结果，我建议不要使用它。

相反，使溢出宽度足够宽，以便轻松容纳所有元素，因此如果禁用javascript，它将不会显得难看。

（我知道你对jquery很好，所以我在例子中使用它，简单js中的outerWidth属性也有webkit中的bug（在某些情况下往往为0）。）

所以你需要总结元素的outerWidth（）并设置内容持有者的宽度，这样你就可以使用scrollLeft，而不是过度滚动。

没有其他技巧，只有一个scrollTo函数，因为如果你是jquery的新手并且你可能想要使用它，那么计算位置并不是那么简单。

如何用CSS强制div宽度来扩展到它的内容但不受其容器的限制？

2 个答案: