Как обернуть группу элементов управления как единое целое в cshtml / razor?

Question

Мой HTML довольно ржавый.По сути, я получаю список элементов (из таблицы данных) и добавляю радиокнопки вместе с загруженным текстом элемента и значком, который пользователь может выбрать.Все хорошо, за исключением того, что я хочу, чтобы радио-кнопка, сопровождающий текст и значок были обернуты в группу.

Например, на небольшом экране с большим количеством вариантов он отображается следующим образом:

<O> Item One <icon>  <O> Item Two <icon>  <O> Item Three
<icon>  <O> Item Four <icon>  <O> Item Five <icon>  <O>
Item Six <icon>

Но я хочу, чтобы это обернулось в моих группах, примерно так:

<O> Item One <icon>  <O> Item Two <icon>
<O> Item Three <icon>  <O> Item Four <icon>
<O> Item Five <icon>  <O> Item Six <icon>

И, конечно, ярлыки не такие однородные по размеру, и я хочу, чтобы разрывы были динамическимипоэтому, если пользователь использует большой монитор, все элементы находятся на 1 строке или 2 строках и т. д.

Итак, вопрос сводится к тому, есть ли элемент, в который я могу обернуть каждую группу, иметь обтеканиевыключен внутри группы, и принудительное обертывание происходит между группами?

Answer 1

Оберните каждую группу в тег span с помощью стиля CSS white-space: nowrap.Это заставляет все элементы в одной группе оставаться в одной строке, но позволяет браузеру размещать группы.