JSF selectOneRadio 缩进答案

【问题标题】：JSF selectOneRadio indentationJSF selectOneRadio 缩进
【发布时间】：2012-06-01 04:51:26
【问题描述】：

有没有缩进一组单选按钮？我希望它看起来像下面这样：

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>

【问题讨论】：

标签： css jsf styles radio-button indentation

【解决方案1】：

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

.myIndent { 
    margin-left: 3em; 
}

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

【讨论】：

我尝试了你的左边距建议，但它不适用于广播项目，只是“测试”文本。
尝试去掉 p 标签，然后添加第二个 div 类。

.indent2 { margin-left: 3em; }
我用 div 代替了它，就像在你的例子中一样（添加了缺少的样式标签），但它仍然不起作用。我怀疑这适用于常规的 html 单选框，但如果我使用 JSF 的 selectOneRadio，JSF 会忽略任何类型的样式，同时将其从“selectOneRadio”格式转换为 html 的单选/表格。

【解决方案2】：

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

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

【讨论】：

谢谢。看来我需要该布局属性才能使其向下列出，但我真正要求的是缩进列表中的特定项目。我还添加了一个视觉示例以使其更加清晰。