Блог

Я понимаю, что этот вопрос довольно специфичен… Я пытаюсь четко разобраться в том, как влияет «ширина» на модель css box.

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

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

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

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

Мой вопрос: почему 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">amp;nbsp;<span class="">A short string</span>
                </label>
            </li>
            <li>
                <label for="a-2">
                    <input name="a" id="a-2" value="1" type="radio">amp;nbsp;<span class="">A very very very  very very very very very very  very very very string</span>
                </label>
            </li>
        </ul>
    </div>
</fieldset>
 

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

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

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

 ul.blockLabels li{float:left;}