JSF selectOneRadio缩进

Question

无论如何缩进一组单选按钮？我希望它看起来如下：

o Item 1
o Item 2
    o Item 2.1
    o Item 2.2
o Item 3

我尝试将一种风格应用于它，但它不起作用。

<style>
    .indent {
        text-indent: 3em;
    }
</style>

<p class="indent">test</p>

<h:selectOneRadio layout="pageDirection" value="#{myBean}">
    <f:selectItem itemValue="1" itemLabel="Item 1" />
    <f:selectItem itemValue="2" itemLabel="Item 2" />   <!-- also okay if item 2 is not selectable and item 2.1 and 2.2 are -->
    <p class="indent">
        <f:selectItem itemValue="2.1"  itemLabel="Item 2.1" />
        <f:selectItem itemValue="2.2" itemLabel="Item 2.2" />
    </p>
    <f:selectItem itemValue="3" itemLabel="Item 3" />
</h:selectOneRadio>

Answer 1

您是否尝试过添加边距而不是缩进？

.myIndent { 
    margin-left: 3em; 
} 

看看http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ 同时，它们还包括单选按钮样式。

Answer 2

我想你想把你的单选按钮显示为列表。将带有layout值的pageDirection属性添加到<h:selectOneRadio />代码组件中以实现它：

<h:selectOneRadio layout="pageDirection" value="#{myBean}">
    <!-- your items go here... -->
</h:selectOneRadio>