Thêm khoảng cách giữa hai nút radio của h: selectOneRadio

Question

Trong JSF 2.0 Tôi có dưới đây

<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> 

tôi nhận được đầu ra như

O Accepted O Rejected 
      ^^ 

Những gì tôi muốn là thêm khoảng cách giữa hai nút radio để đầu ra sẽ là

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

Tôi đã thử thêm   giữa hai nút radio tuy nhiên nó không hoạt động. Tôi đang nhận được nút radio trên dòng tiếp theo.

<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> 

Bất kỳ ý tưởng nào về điều này có thể được thực hiện?

HTML được tạo mà không   là

<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> 

Khi tôi thêm &nbsp một không gian được tạo ra trước khi <table id="radio26"> tuyên bố.

Answer 1

Tuyên bố từ chối trách nhiệm, tôi không biết gì về JSF, vì vậy phần sau đây dựa trên kinh nghiệm của tôi về ASP.NET và thêm khoảng trống trong đó. Nếu đây là cực kỳ không chính xác, xin vui lòng cho tôi biết, và tôi sẽ gỡ bỏ ngay lập tức ...

Hãy thử thêm không gian để các nhãn hàng, cập nhật ...

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

Để ...

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

Nó thể cần phải được thoát mình thành ...

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

CẬP NHẬT

Như OP đã nói trong phần nhận xét, điều này sẽ mở rộng liên kết.

Hình như bạn sẽ có thể thiết lập một lớp CSS cho đối tượng cha mẹ với một cái gì đó giống như ...

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

Và sau đó trong phong cách của bạn/CSS có một cái gì đó giống như ...

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

Answer 2

Chỉ cần nghĩ id chia sẻ câu trả lời của tôi ... sau inspecing trang với firebug tôi đã kết thúc với những điều sau

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;} 

Answer 3

Không có gì của những câu trả lời làm việc cho tôi, nhưng như thế này hoạt động hoàn hảo:

nhãn .ui-selectoneradio {padding-phải: 10px!quan trọng; }

Đây là trường hợp sử dụng các dấu phẩy

Answer 4

Tôi gặp khó khăn với điều này. Áp dụng Style không làm việc cho tôi khi tôi đã làm nó trên h: selectOneRadio, tuy nhiên nó đã làm việc khi áp dụng trong nhóm bảng bao quanh nó.