html - css shrinkwrap div 比其父级宽

Question

我正在用 css 构建一个标签栏，并希望它能够处理比屏幕上显示的更多的标签。我的 HTML 结构大致如下:

<div id="tabbar">
    <div id="tablist"></div>
</div>

CSS:

#tabbar     {position:absolute;width:100%;height:24px;overflow:hidden;}
#tablist    {position:absolute;top:0px;left:0px;height:24px;}
div.tab     {float:left;}

将所有选项卡插入#tablist。只要有足够少的标签不会溢出，#tablist 就会正确收缩，我可以获得它们的总宽度。然而，一旦屏幕上无法容纳更多内容，它们就会换行到下一行(虽然你看不到它，显然，由于#tabbar 的溢出:隐藏)，并且#tablist 的宽度不再准确地表示选项卡的总宽度。

我可以通过 javascript 手动设置#tablist 的宽度，添加每个选项卡的总宽度，但这似乎是一种非常困惑且容易出错的方法。我也可以使用表格，但我宁愿不用，因为它违反了整个 css-for-layout 理论。

本质上，我正在寻找的是一种将 div 围绕其内容收缩包装的方法，而不会由于 div 父级的宽度而将其内容包装到第二行。

编辑:这样做的目的是构建一个标签栏，允许用户在标签太多时滚动，但为了做到这一点，我需要知道#tablist 的宽度或总宽度所有选项卡，都大于#tabbar 的宽度，这样我就可以激活“向右滚动”按钮。我还需要知道确切的宽度，而不仅仅是它更宽的事实，这样我才能知道它应该能够滚动多远。

Answer 1

据我了解，即使标签未显示在屏幕上，您也希望将标签保持在一行中，也许您会滚动它们？我可能是错的，但如果我是对的 - 你可以简单地在 #tablist 上设置足够大的宽度来 float 所有选项卡，然后这些选项卡将被父级 (#tabbar) overflow:hidden 隐藏。

#tablist {width: 10000px}