CSS - заставить дочерний DIV увеличить ширину страницы?

Question

Я работаю над редактируемой навигацией.Пользователь может добавить много вкладок в верхней части, как они хотят.В случае если имеется много вкладок, из-за которых набор вкладок будет разбит / перенесен на следующую строку, я бы хотел перенести его на 1 строку, даже если это означает, что ширина страницы будет значительно увеличиваться.

Есть ли способ для дочернего DIV увеличить ширину страницы, даже если содержимое находится в обертке?В моей ссылке на JS Fiddle ниже у меня есть простая страница-обертка с правильным sidenav.Я использую вкладки Listamatic (http://css.maxdesign.com.au/listamatic/horizontal05.htm) для верхней части. Как вы можете видеть, вкладки разбиваются на множество строк вкладок, и это выглядит не очень хорошо. Могу ли я использовать немного CSS, чтобы заставить DIV не переходить на второйили 3-я строка? Я бы хотел, чтобы DIV был жидким в зависимости от количества вкладок (и длины текста в тексте вкладок). Есть идеи?

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

Answer 1

Это можно сделать с помощью 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;
}

Answer 2

Единственный способ расширить дочерний элемент за пределы его родительского - это использовать абсолютную ширину.Если вы сделаете что-то подобное, у вас будут проблемы с z-index для сортировки.Вы можете сделать что-то вроде прокрутки списка вкладок внутри его div.

jsFiddle здесь