Vaadin 23单选按钮组CSS样式问题：如何实现左对齐？

要解决单选按钮选项不规则对齐的问题，可在Styles.css中添加以下CSS规则：

/* 让单选组容器内的选项整体左对齐 */
vaadin-radio-group {
  align-items: flex-start;
}

/* 确保单个单选按钮的按钮与文本左对齐 */
vaadin-radio-button {
  justify-content: flex-start;
}

/* 可选：调整按钮与文本的间距，保持视觉一致性 */
vaadin-radio-button::part(label) {
  margin-left: var(--lumo-space-xs);
}

说明 #

Vaadin组件基于Shadow DOM构建，上述选择器直接针对vaadin-radio-group和vaadin-radio-button组件本身，以及通过::part(label)访问单选按钮的标签元素，覆盖默认的居中对齐样式，实现选项左对齐效果。如果仍有异常，可检查是否存在其他自定义样式冲突，优先保证上述规则的优先级（尽量避免使用!important，建议排查样式冲突根源）。

内容的提问来源于stack exchange，提问作者Datta Dhonde