Question

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

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

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

SELECT BOX

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

select是在float的div内：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样式为＆＃39; ul＆＃39;元素导致了这种行为。所以我想如果你真的希望这种情况发生，那么使用display：flex等来搞乱下拉选项。

选择并排列出的框选项，而不是其他框

1 个答案: