Несколько вариантов выбора в одном ряду

Question

У меня есть поле выбора с несколькими тегами. Прямо сейчас, у поля есть много опций, поэтому мне не нравится идея, что все опции находятся ниже друг друга. Я пытаюсь добиться того, чтобы в каждой строке было больше опций, чтобы поле выбора было намного меньше, и в нем было легче ориентироваться. Вот как выглядит поле выбора сейчас:

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

Я бы хотел, чтобы это выглядело так:

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

Спасибо.

Answer 1

Вы не можете перемещать или иным образом перемещать option элементы с помощью CSS или, насколько я знаю, 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

Это (относительно) простое решение, эмулирующее элемент select. Я написал это в jQuery, но это можно сделать и в чистом JS.

В моей демонстрации элементы плавают по два в строке, но, очевидно, это можно легко изменить.

Вот скрипка.

Редактировать: Пропущено, что это множественный выбор. Вот обновленная версия с несколькими вариантами .

Answer 3

Это невозможно при использовании нативного select HTML-элемента управления.

Вместо этого можно написать код javascript для создания элемента, например span для каждого параметра, и добавить его на страницу.,Затем они будут сидеть горизонтально напротив друг друга.Затем вы бы скрыли исходный элемент select, но подключили события в добавленных элементах div, чтобы выделить соответствующую опцию выбора по щелчку.