Можно ли использовать CSS для группировки переключателей, отображаемых с помощью RadioButtonList, по их меткам?

Question

Мы работаем с CMS (Kentico), которая внутренне использует веб-формы ASP.NET RadioButtonList визуализировать переключатели на пользовательских формах. Через CMS мы все еще можем контролировать RepeatDirection а также RepeatLayout Свойства этого элемента управления, но немного другое.

Требуется, чтобы радио отображалось горизонтально RepeatDirection Горизонтальный и RepeatLayout Поток достигает этого. Однако отображаемая разметка представляет собой просто чередующийся список <input /> а также <label /> элементы.

Проблема возникает при узкой ширине устройства, когда список переключателей начинает переноситься. <input /> а также <label /> элементы переносятся по отдельности, поэтому вы теряете визуальную группировку между элементом управления и меткой.

Поскольку мы не можем напрямую влиять на разметку, какой вариант мы должны имитировать группировку HTML? Я боюсь, что это может быть решение только для JS, которое я хотел бы избежать, если это возможно.

Answer 1

Если вам нужна пользовательская разметка HTML, вам следует рассмотреть возможность использования обычного элемента SELECT с обычными элементами OPTION (или любой разметки, которая может вам понадобиться).

Вы также можете использовать атрибут runat="server" вместе с идентификатором для этих элементов, если вам нужны некоторые обработчики или взаимодействие с сервером. ASP обрабатывает это как веб-элементы управления (см. Пространство имен System.Web.UI). Другой вариант - скрыть стандартный элемент управления ASP и установить скрытые значения с помощью Javascript, если параметры в пользовательской разметке изменятся. Это также очень хорошее решение, если вам нужно стилизовать некоторые необычные радиоприемники.