Select 框选项并排列出，而不是一个在另一个之上

Question

THIS is a duplicate of the Display two options within select box side by side

我正在为 select 元素使用 JQuery Selectric 插件，使用为插件提供的未更改的默认值 css。一切看起来都很好，除了下拉列表永远不会像您一直期望的那样在另一个选项下显示一个选项，而是它们并排显示在一行中。即使我减少了元素的宽度，它们也无法正常显示。

换句话说，它们显示如下。

SELECT 盒子

选项1 选项2 选项3 选项4 等等

select 在 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

通过消除过程，'ul' 元素的 CSS Flex 样式似乎导致了此行为。所以我想如果你真的希望发生这种情况，那么使用 display:flex 等来扰乱下拉选项。

Select 框选项并排列出，而不是一个在另一个之上

Select box options listing side by side not one above other

jquery

css

drop-down-menu

jquery-selectbox