Question

我有一个带有多个标签的选择字段。现在，该领域有很多选择，所以我不喜欢所有选项都在彼此之下的想法。我想要实现的目标是在每一行中有更多选项，使选择字段更小，更容易导航。这就是选择字段现在的样子：

[option]
[option]
[option]
[option]

我希望它看起来像这样：

[option] [option] [option] [option]

感谢。

Answer 1

你不能使用CSS浮动或以其他方式移动option元素，或者据我所知，JavaScript。虽然这是不可能的，但为什么不使用嵌套的ol（或ul ...）来包含要水平显示的元素？例如：

<form action="#">
    <fieldset>
        <legend>Select some stuff</legend>
        <fieldset>
            <ol>
                <li><label for="inputs1">label 1</label><input type="checkbox" name="inputs[]" id="inputs1" /></li>
            <li><label for="inputs2">label 2</label><input type="checkbox" name="inputs[]" id="inputs2" /></li>

<!-- other stuff -->

                <li><label for="inputs11">label 11</label><input type="checkbox" name="inputs[]" id="inputs11" /></li>
            </ol>
        </fieldset>
    </fieldset>
</form>

使用CSS：

fieldset {
    width: 50%;
    margin: 0 auto 1em auto;
    position: relative;
    border: 1px solid #f90;
}

fieldset > fieldset {
    width: 100%;
    position: absolute;
    left: -1px;
    display: none;
}

fieldset:hover > fieldset,
fieldset > fieldset:hover {
    display: block;
}

fieldset > fieldset > ol li {
    float: left;
    border: 1px solid #000;
    padding: 0.2em;
    width: 6em;
}

JS Fiddle demo

Answer 2

这是一个（相对）简单的解决方案，可以模拟选择元素。我已经用jQuery编写了它，但它也可以在纯JS中完成。

在我的演示中，元素每行浮动两次，但显然可以轻松更改。

Here is the Fiddle.

修改：错过了它是一个多重选择。这是updated multiple select version.

Answer 3

使用原生select HTML控件无法做到这一点。

您可以改为编写一些javascript代码来创建元素，例如每个选项的span，然后将其附加到页面。然后它们将彼此水平放置。然后，您将隐藏原始select元素，但在附加的div上挂钩事件以突出显示选择单击时的相关选项。

一行中有多个选择选项

3 个答案: