0

这是在选择框中并排显示两个选项的副本

我正在使用 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%}
4

1 回答 1

0

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

于 2017-07-31T17:09:24.103 回答