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

【问题标题】：Select box options listing side by side not one above other选择框选项并排列出，而不是一个在另一个之上
【发布时间】：2017-07-28 12:44:34
【问题描述】：

这是Display two options within select box side by side的副本

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

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

选择框

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

选择位于 float:left 的 div 中，但无论我尝试向元素添加什么样式，选项都无法正确显示。但是，它们是具有正确鼠标悬停效果等的正确分开的选择 - 只是并排而不是一个在另一个之下。

任何想法如何让元素以标准垂直列表格式显示？

谢谢。

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%}

【问题讨论】：

分享你的html
Display two options within select box side by side的可能重复
@chirag - 不是真正的重复，因为这是意外行为，并且不应该由另一个插件解决，因为它不应该首先发生
好的，所以我从文件中删除了除了 Selectric 插件之外的所有内容，它没有任何区别，所以我想有一个其他人没有看到的基本问题 - 必须在 GitHub 上处理它跨度>

标签： jquery css drop-down-menu jquery-selectbox

【解决方案1】：

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

【讨论】：