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

Question

Мне просто нужна проверка работоспособности здесь ... ДЕМО

В принципе, я не могу понять, как получить поле под ссылкой, чтобы увеличить его по мере добавления контента. Кажется, он фиксирован по ширине родительского элемента 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

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

Answer 3

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

Answer 4

Вы уже пробовали предварительно пометить

<code><pre>text goes here

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