IE6 HTML контроль упаковки

Question

Есть ли способ предотвратить перенос элементов управления в IE6? Например, у меня есть ярлык и одно поле выбора. Ширина поля выбора является динамической (в зависимости от содержимого). Я хочу, чтобы метка всегда была слева от поля выбора. Прямо сейчас проблема, с которой я сталкиваюсь, заключается в том, что поле выбора опускается ниже метки. Я попытался использовать тег <nobr>, а также правила переноса слов CSS, но поскольку это не текст, правила переноса не применяются. Единственный способ, который я нашел, чтобы заставить его работать, - поместить их в таблицу из двух столбцов, но мне не нравится это решение. Есть ли другой способ?

Answer 1

Если метка и вход имеют встроенный дисплей («display: inline;»), и ввод переносится на новую строку, то вероятность того, что родительский контейнер слишком узок. При этом типичные горизонтальные макеты форм не зависят от этого встроенного дисплея, они используют более контролируемый подход с использованием плавающих элементов на уровне блоков. Например, с учетом следующего HTML:

<div class="field">
    <label for="fieldId">field label</label> 
    <input id="fieldId" name="field" />
</div>

Вы можете установить положение метки с помощью следующего CSS:

.field {
    overflow: hidden; /* clear float */
}
.field label {
    display: block;
    float: left;
    margin: 0 5px 0 0;
}

В специфике есть тонна вариаций , но вышеизложенное передает основную концепцию.