css - JSF selectOneRadio 缩进

Question

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

o 项目 1
o 项目 2
    o 项目 2.1
    o 项目 2.2
o 项目 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

我猜您想将单选按钮显示为列表。将带值的layout属性添加到标签组件中即可实现：pageDirection<h:selectOneRadio />

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

Answer 2

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

.myIndent { 
    margin-left: 3em; 
} 

看看http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ ，它们涵盖了单选按钮样式。