Vaadin 单选按钮，水平放置而不是垂直堆叠

Question

我想在 1 行中显示我的单选按钮，例如：

◎ 选项1     ◉选项2

但是，使用 Vaadin 我无法完成此操作，如下所示，

◎选项1

◉选项2

这是我的代码：

final List<String> options = Arrays.asList(new String[] {
                "hebele", "hubele"});
        
        final OptionGroup group = new OptionGroup("", options);
        
        group.setNullSelectionAllowed(false); // user can not 'unselect'
        group.select("hubele"); // select this by default

我该如何更改它？

Answer 1

在 Vaadin 7.3 中，Valo 主题支持水平 OptionGroup，无需编写自定义样式：

OptionGroup group = new OptionGroup("", options);
group.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);

Answer 2

正如 The Book of Vaadin 中所述，您必须定义主题来设置您自己的 style.css 文件。

然后您可以覆盖要内联显示的选项的默认样式，如下所示：

.v-app .v-select-optiongroup .v-select-option {
    display:inline;
}

Answer 3

我解决了这个问题，如下所示。

RadioButtonGroup<String> radioGroupGtip = new RadioButtonGroup<>();
radioGroupGtip.getStyle().set("white-space","nowrap");