我正在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的overflow：hidden，您看不到它），并且#tablist的宽度不再准确地代表标签的总宽度。
我可以通过javascript手动设置#tablist的宽度，并添加每个标签的总宽度，但这似乎非常凌乱且容易出错。我也可以使用表格，但是我不希望这样，因为它违反了整个CSS布局理论。
本质上，我正在寻找的是一种将div围绕其内容收缩包装的方法，而不会由于div父级的宽度而将其内容包装到第二行。
编辑：这样做的目的是建立一个标签栏，允许用户在标签过多时滚动，但是为此，我需要知道#tablist的宽度或所有标签的总宽度，大于#tabbar的宽度，因此我可以激活“向右滚动”按钮。我还需要知道确切的宽度，而不只是知道它更宽的事实，以便我知道它应该能够滚动多远。
最佳答案
据我了解，即使这些选项卡未在屏幕上显示，您也希望将它们保持在一行上，也许您会在滚动它们？我可能是错的，但是如果我是对的，您可以简单地在#tablist上设置足够大的宽度以浮动所有标签，然后这些标签会被父对象（#tabbar）溢出：隐藏。
#tablist {width: 10000px}