我正在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的宽度，这样我就可以激活“向右滚动”按钮。我还需要知道确切的宽度，而不仅仅是因为它更宽，所以我知道应该能够滚动多远。
答案 0 :(得分：0)
根据我的理解，您希望将标签保持在一行，即使它们没有显示在屏幕上，也许您会滚动它们？我可能是错的，但是如果我是正确的 - 你可以在#tablist上设置一个足够大的宽度来浮动所有标签，然后由父标签隐藏（#tabbar）overflow：hidden。
#tablist {width: 10000px}