Question

我正在进行可编辑的导航。用户可以根据需要在顶部添加许多选项卡。如果有很多选项卡会强制将一组选项卡拆分/包装到下一行，我想强制它在1行，即使这意味着页面宽度会大大增加。

即使内容在包装器中，是否还有一种方法可以让子DIV扩展页面宽度？在我下面的JS Fiddle链接中，我有一个带右侧的简单包装页面。我使用Listamatic标签（http://css.maxdesign.com.au/listamatic/horizontal05.htm）作为顶部。正如您所看到的，选项卡分为多行选项卡，看起来不太好。我可以使用一些CSS来强制DIV不包裹到第二行或第三行吗？我希望DIV基于标签的数量（以及标签文本中文本的长度）为液体。有什么想法吗？

http://jsfiddle.net/zenfiddle/yUPCC/3/

Answer 1

将孩子扩展到父母之后的唯一方法是使用绝对宽度。如果你这样做，你将有z-index问题进行排序。你可以做一些事情，比如让标签列表在其div中滚动。

jsFiddle here

Answer 2

可以使用正文上的white-space: nowrap和列上的display: inline-block来完成此操作。某些栏目也可能需要vertical-align: top。

这是一个有效的演示。我试图删除所有不需要的东西来说明这个概念。

演示：http://jsfiddle.net/ThinkingStiff/xauMb/

CSS：

body {
    white-space: nowrap;
}

#container {
    display: inline-block;
    vertical-align: top;
}

.column {
    display: inline-block;
}

.rightnav {
    white-space: normal;
}

CSS - 强制子DIV扩展页面宽度？

2 个答案: