一行中有多个选择选项 [英] Multiple select options in one row

问题描述

我有一个选择字段，带有多个标记。现在，该领域有很多选择，所以我不喜欢所有选项都低于其他选项的想法。我试图实现的目标是在每行中有更多的选项，以使选择字段更小，并更容易导航。这就是现在选择字段的样子：

I have a select field, with the multiple tag. Right now, the field has many options, so I don't like the idea that all options are below each other. What I am trying to achieve, is to have more options in each row, to make the select field much smaller, and easier to navigate in. This is what the select field looks like now:

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

我希望它看起来像这样：

I would like it to look like this:

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

谢谢。 b

推荐答案

这是一个（相对）简单的模拟select元素的解决方案。我写过jQuery，但它也可以在纯JS中完成。

This is a (relatively) simple solution that emulates a select element. I've written it in jQuery but it could be done in pure JS as well.

在我的演示中，元素每行浮动两次，但显然这可以很容易地更改。

In my demo the elements are floated two per row but obviously this could be changed easily.

这是小提琴。

编辑：错过了它是多重选择。这是更新的多选版本。

Missed that it's a multiple select. Here is an updated multiple select version.

这篇关于一行中有多个选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！