Выберите опции бокса рядом друг с другом, а не один над другим

Question

Это дубликат отображения двух вариантов в поле выбора рядом

Я использую плагин JQuery Selectric для выбора элементов, используя нетронутую CSS по умолчанию, предоставленную для плагина. Все выглядит хорошо, за исключением того, что в раскрывающемся списке никогда не отображается один параметр под другим, как вы всегда ожидаете, скорее, они отображаются рядом в одном ряду. Даже при уменьшении ширины элемента они никогда не отображаются нормально.

Другими словами, они показывают следующее.

ВЫБЕРИТЕ ЯЩИК

Вариант1 вариант2 вариант3 вариант4 и т. Д.

Выделение находится внутри div, который является float: left, но независимо от того, какой стиль я пытаюсь добавить к элементу, опции никогда не отображаются должным образом. Тем не менее, они представляют собой правильный выбор с правильными эффектами наведения мыши и т. Д. - только рядом, а не под другим.

Любые идеи, как я могу получить элемент для отображения в стандартном вертикальном формате листинга?

Благодарю.

HTML так же прост, как я предложил.

<select>
<option value="1">Apples</option>
<option value="2">Bananas</option>
<option value="3">Peaches</option>
<option value="4">Pears</option>
</select>

Содержащие div следующие

<div id="page">
<div id="main">
<div id="info">
</div>
</div>
</div>

Стили следующим образом

div#page {position:absolute;left:0px;right:0px;top:110px;width:100%;}
div#main {margin:auto;left:0px;right:0px;text-align:left;max-width:1100px;padding-left:20px;padding-right:20px;}
div#info {float:left;width:46%;margin-left:4%}

Answer 1

В процессе исключения кажется, что такое поведение вызвано стилем CSS Flex для элементов 'ul'. Так что, если вы действительно хотите, чтобы это произошло, используйте display:flex и т. Д., Чтобы связываться с опциями выпадающего меню.