Почему применение ширины CSS приводит к тому, что это поле опускается вниз?

Question

Я понимаю, что этот вопрос довольно специфичен ... Я пытаюсь ясно понять влияние "ширины" на модель css box.

У меня есть ярлык слева от двух переключателей. Ярлык плавает влево, а переключатели появляются справа от ярлыка. Сами переключатели имеют метки справа от них, и эти метки могут быть длинными.

Радиостанции находятся в блоке UL.

Когда у меня ширина: авто; в блоке UL, а затем сузить браузер до довольно узкого значения, переключатели и соответствующие им метки опустятся до следующей строки.

Если я уберу ширину: авто, переключатели останутся плавающими, а строки меток рядом с радио продолжат уменьшаться, что я и хочу.

Мой вопрос: почему width: auto заставляет радиостанции и их метки опускаться вниз по линии? это из-за того, что width: auto пытается создать поле, в которое помещается вся длина строки метки, не пропуская текст? Или что-то еще на работе?

Вот пример кода, который демонстрирует поведение:

<style>
    .inlineLabels ul{
        float:left;
        width: 66%;
        padding: 0;
    }

    p.label{
        float:left;
        text-align:right;
        position:relative;
        width:32%;
        margin: .3em 2% 0 0;
        display:block;
    }

    ul.blockLabels{
        /*width:auto; why does uncommenting this cause the radios to drop down to a new line when shrinking browser size? */ 
        list-style:none;
    }
</style>
<fieldset class="inlineLabels">
    <div>
        <p class="label">Choose:</p>
        <ul class="blockLabels">
            <li>
                <label for="a-1">
                    <input name="a" id="a-1" value="0" type="radio">&nbsp;<span class="">A short string</span>
                </label>
            </li>
            <li>
                <label for="a-2">
                    <input name="a" id="a-2" value="1" type="radio">&nbsp;<span class="">A very very very  very very very very very very  very very very string</span>
                </label>
            </li>
        </ul>
    </div>
</fieldset>

Answer 1

TLDR: «предпочтительной шириной» плавающих элементов с шириной auto является ширина содержимого без разрывов строк.Вот почему движок сначала обернет поплавок и только в качестве последней меры он начнет обтекание текста внутри поплавка.

Ответ вы можете прочитать в спецификации: http://www.w3.org/TR/CSS2/visudet.html#float-width

Если значение 'width' вычисляется как 'auto', используемое значение равно ширине "сжать до нужного размера".

Расчет ширины усадки до совпадения аналогичен вычислению ширины таблицыячейка с использованием алгоритма автоматического размещения таблицы.Грубо говоря: рассчитайте предпочтительную ширину, отформатировав содержимое без разрывов строк, кроме тех, где происходят явные разрывы строк, а также рассчитайте предпочтительную минимальную ширину, например, попробовав все возможные разрывы строк.CSS 2.1 не определяет точный алгоритм.В-третьих, найдите доступную ширину: в этом случае это ширина содержащего блока минус используемые значения 'margin-left', 'border-left-width', 'padding-left', 'padding-right','border-right-width', 'margin-right' и ширина любых соответствующих полос прокрутки.

Тогда ширина усадки до: min (max (предпочтительная минимальная ширина, доступная ширина), предпочтительная ширина).

Answer 2

Я думаю, независимо от того, установлена ​​ли ширина или нет, вам, вероятно, нужно стилизовать LI.

ul.blockLabels li{float:left;}