Положение внутри поплавкового элемента

Question

Я сделал собственное выпадающее меню, вот HTML:

<div class='dropdown'>
    <div class='dropdownTitle'>Sort by<span class='select_arrow'></span></div>
    <ul class='selectPanel'>
        <li><input  type='checkbox' id='allProducts'><label for='allProducts'>Name</label></li>
        <li><input  type='checkbox' id='Enterprise'><label for='Enterprise'>Date</label></li>
        <li><input  type='checkbox' id='Security'><label for='Security'>Popularity</label></li>
        <li><input  type='checkbox' id='Data'><label for='Data'>Rating</label></li>
    </ul>
</div>

В большинстве случаев это работает нормально, но, если всплыть раскрывающийся список, элемент внутри не отображается так, как я ожидал: ширина панели не увеличивается, когда метки больше. Я сделал jsfiddle.

Кто-нибудь может объяснить мне, почему это происходит, и как решить?

Спасибо!

Answer 1

Добавлять white-space: nowrap; на ваш CSS:

.dropdown {
    display : inline-block;
    font-size: 12px;
    color : #646464;
    white-space: nowrap;
}

Answer 2

Вы можете решить это, добавив white-space: nowrap на ваш li, Что-то вроде этого:

.dropdown>ul>li {
    margin : 0;
    padding : 0;
    padding : 0 8px;
    display : block;
    white-space: nowrap;
}

Это препятствует тому, чтобы два встроенных блока (метка и ввод) появлялись на другой строке.

Answer 3

Эй, так в основном, когда вы используете float:right столько строк появится в строке, сколько возможно, если элемент, который не помещается, будет перенесен в следующую строку.

Таким образом, легко исправить это установить ширину .dropdown>ul>li в этом случае width : 140px; работает для этой скрипки, но это будет зависеть от самой длинной длины текста в списке

вот как это сейчас выглядит в JS Fiddle