CSS: Почему эта коробка не станет шире?

Question

Мне просто нужно проверить вменяемость здесь ... DEMO

В принципе, я не могу понять, как получить окно по ссылке, чтобы получить более широкое, как добавляют больше содержания. Кажется, что он привязан к ширине родительского div (или ширине, скажем, самого длинного элемента, такого как select или действительно длинного слова без пробелов), несмотря на то, что он абсолютно позиционирован. Я использую этот трюк все время с ul и li, но не имеет смысла использовать это в моей ситуации, и по какой-то сумасшедшей причине он просто не будет работать с div внутри div.

Я не хочу устанавливать ширину (что, конечно, работает), потому что я не всегда знаю, что будет в этой коробке. ГРР

спасибо: \

EDIT

Оказывается, что удаление position:relative из родительского элемента делает, по сути, позволяет коробке, чтобы получить более широкий. Тем не менее, относительное позиционирование необходимо, потому что мне нужно, чтобы дочерний div был абсолютно позиционирован под родительским div, а местоположение родительского div технически динамично (так что не выяснять абсолютные координаты страницы).

Answer 1

Если я правильно понимаю ...

Плавающие контейнеры (т.е. #parent) будет соответствовать их содержанию с умолчанию width: auto. Содержимое будет разбиваться на строки, где это возможно, чтобы предотвратить увеличение ширины.

Чтобы противостоять этому, вам просто нужно использовать white-space: nowrap.

Либо за содержание в целом:

.advanced { 
    /* ... */ 
    white-space: nowrap; 
} 

Или определить новый класс для обеспечения более гибкого использования:

.line { 
    white-space: nowrap; 
} 

Затем, (например) обернуть каждый label/select как :

<div class="line"> 
    <label>Show:</label> 
    <select name="showAll"> 
     <option value="true">My Team</option> 
     <option value="false">Mine Only</option> 
    </select> 
</div> 

Answer 2

Вы попробуйте Преждеосвященных тег

<pre>text goes here</pre> 

это приведет к разорвать линию только там, где вы вставить <br />

Answer 3

div#parent имеет position: relative;. Попробуйте удалить эту декларацию. В моей среде это приводит к тому, что div расширяется по мере необходимости.

Answer 4

Я нахожусь в Google Chrome 6.0.422.0 dev, и когда я добавляю контент (текст), серая коробка по мере необходимости расширяется по горизонтали и вертикали. Какой браузер вы используете?