IE6 HTML control wrapping

Question

Есть ли способ предотвратить обертывание элементов управления в IE6? Например, у меня есть ярлык и один блок выбора. Ширина окна выбора является динамической (в зависимости от содержимого). Я хочу, чтобы метка всегда была слева от поля выбора. Прямо сейчас проблема, с которой я столкнулась, - это поле выбора под меткой. Я пробовал использовать тег <nobr>, а также правила Word-wrap 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; 
} 

Там в ton of variations о специфике, но выше передает основную концепцию.