在 h:selectOneRadio 的两个单选按钮之间添加空格答案

【问题标题】：Adding space between two radio buttons of h:selectOneRadio在 h:selectOneRadio 的两个单选按钮之间添加空格
【发布时间】：2012-07-16 11:00:30
【问题描述】：

在 JSF 2.0 中我有以下

<h:selectOneRadio value="#{StageGate.sketchesSG002006Decision}" onclick="validateMyRadioButton()" id="radio26">
    <f:selectItem itemValue="Accepted" itemLabel="Accepted" id="accepted"/>
    <f:selectItem itemValue="Rejected" itemLabel="Rejected" id="rejected"/>
</h:selectOneRadio>

我得到的输出为

O Accepted  O Rejected
          ^^

我想要的是在两个单选按钮之间添加空格，以便输出为

O Accepted           O Rejected
          ^^^^^^^^^^^

我尝试在两个单选按钮之间添加&nbsp;，但它不起作用。我在下一行得到单选按钮。

<h:selectOneRadio value="#{StageGate.sketchesSG002006Decision}" onclick="validateMyRadioButton()" id="radio26">
    <f:selectItem itemValue="Accepted" itemLabel="Accepted" id="accepted"/>
    &nbsp;&nbsp;&nbsp;
    <f:selectItem itemValue="Rejected" itemLabel="Rejected" id="rejected"/>
</h:selectOneRadio>

知道如何做到这一点吗？

没有&nbsp;的HTML是

<table id="radio26">
<tr>
<td>
<input type="radio" checked="checked" name="radio26" id="radio26:0" value="Accepted" onclick="validateMyRadioButton()" /><label for="radio26:0"> Accepted</label></td>
<td>
<input type="radio" name="radio26" id="radio26:1" value="Rejected" onclick="validateMyRadioButton()" /><label for="radio26:1"> Rejected</label></td>
</tr>
</table>

当我在<table id="radio26"> 语句之前添加&nbsp 时，会生成一个空格。

【问题讨论】：

标签： jsf jsf-2 whitespace selectoneradio

【解决方案1】：

免责声明，我对JSF一无所知，所以以下是基于我对ASP.NET的经验并在其中添加空格。如果这非常不正确，请告诉我，我会立即删除...

尝试将空格添加到项目标签，更新...

<f:selectItem itemValue="Accepted" itemLabel="Accepted" id="accepted"/>

到...

<f:selectItem itemValue="Accepted" itemLabel="Accepted &nbsp; &nbsp;" id="accepted"/>

它可能需要自己逃到...

<f:selectItem itemValue="Accepted" itemLabel="Accepted &amp;nbsp; &amp;nbsp;" id="accepted"/>

更新

正如 OP 在 cmets 中所说，这将扩展链接。

看起来您应该能够为父对象设置一个 CSS 类，例如...

<h:selectOneRadio styleClass="myRadioCtrl" ... >

然后在你的风格/CSS 中有类似...

.myRadioCtrl span { padding-right: 10px; }

【讨论】：

Accepted &nbsp; &nbsp; 工作，但它使空白作为 Accepted 的链接，这是不好的:(
@Fahim，有没有可能（正如我所说，我对 JSF 一无所知）有类似 itemLabelStyle="padding-right:20px;" 或类似的东西？
@Fahim，或者您可以将class 设置为selectOneRadio 并以这种方式格式化吗？
确切的样式是-

【解决方案2】：

只是想 id 分享我的答案...在使用 firebug 检查页面后，我得到了以下结果

JSF：

   <h:panelGroup id="search-options" layout="block" styleClass="radioButtonSpace">
        <h:selectOneRadio value="#{searchEngineController.reportSearch}">
        <f:selectItem itemValue="#{false}" itemLabel="CEPIS Search" />
        <f:selectItem itemValue="#{true}" itemLabel="Report Search" />
        </h:selectOneRadio>
    </h:panelGroup>

CSS：

.radioButtonSpace table tbody td {padding-right:50px;}

【讨论】：

这很好用。我在周围的 div 中使用了 class="radiobuttonSpace" 并成功了。如果你想把按钮和标签放在一起，你可以这样做： .radioButtonSpace table tbody td:nth-child(even) {padding-right:10px;}

【解决方案3】：

我在这方面遇到了困难。当我在 h:selectOneRadio 上执行时，应用样式对我不起作用，但是在环绕它的面板组中应用时它起作用了。

【讨论】：

请显示代码，因为将面板组包裹在 selectoneradio 周围不会帮助单个单选按钮。将它包裹在每个人身上是不可能的

【解决方案4】：

这些答案都不适合我，但像这样完美地工作：

.ui-selectoneradio label{ padding-right: 10px !important; }

这是在使用primefaces的情况下

【讨论】：

问题是关于 h:selectOneRadio。