h:selectOneRadio jsf 1.1 与 2.0 的 HTML 输出答案

【问题标题】：h:selectOneRadio HTML output for jsf 1.1 vs 2.0h:selectOneRadio jsf 1.1 与 2.0 的 HTML 输出
【发布时间】：2014-02-01 18:09:21
【问题描述】：

对于像 blow 这样的 selectOneRadio 代码：

<h:selectOneRadio value="#{myBean.selectedItem}" enabledClass="selectOneRadio" disabledClass="selectOneRadio">
  <f:selectItem itemLabel="#{myBean.item.label}" itemValue="#{myBean.item.code}"/>   
</h:selectOneRadio>

JSF 1.1 似乎正在生成如下 HTML 输出：

...
<td><label><input type="radio" ...>text text text text ...... </label></td>
...

但在 JSF 2.0 中，它似乎正在生成如下 HTML 输出：

...
<td><input type="radio" ...><label>text text text text ...... </label></td>
...

在 JSF 1.1 中，我使用如下 css 样式来对齐超过一行的长标签文本。但是这种 css 样式似乎不适用于 JSF 2.0 HTML 输出。

.selectOneRadio 
{ display:block;
  text-indent: -25px;
  margin-left: 22px;
}

我可以做些什么来让 JSF 2.0 生成类似于 JSF 1.1 的输出，或者是否有一个可以用于 JSF 2.0 输出的 CSS？

【问题讨论】：

我创建了一个 jsfiddle 来看看是否有人可以帮助我解决 css 解决方案：jsfiddle.net/8j7dK。基本上我需要标签与单选按钮位于同一行。如果我删除 display:inline-block，标签的第 2 行与文本的第一行不对齐。

标签： java html css jsf-2

【解决方案1】：

通过这样做让它工作：

.selectOneRadio input { 
    vertical-align: top;
}

.selectOneRadioLabel {
    width: 120px;  /* width has to set at the label.  It won't work if set at table label */
    text-align:left;
    margin-left:4px;
    display: inline-block;
}
<h:selectOneRadio value="#{myBean.selectedItem}" style="selectOneRadio" enabledClass="selectOneRadioLabel" disabledClass="selectOneRadioLabel">
    <f:selectItem itemLabel="#{myBean.item.label}" itemValue="#{myBean.item.code}"/>   
</h:selectOneRadio>

【讨论】：