對齊單選按鈕上，標籤在JSP/JSF

Question

我想實現在JSF1.1環境下：

性別：女RadioButtonForFemale男RadioButtonForMale

<h:panelGroup> 
    <h:outputLabel for = "searchSex" value = "#{bundle.Sex_Label}" style ="width:15%;"> 
    </h:outputLabel>  
    <h:selectOneRadio id="searchSex" value="#{yy.search_Sex}" style="verticle-align:top;font-size:95%;color:red;"> 
     <f:selectItem itemLabel="F" itemValue="F" /> 
     <f:selectItem itemLabel="M" itemValue="M"/> 
    </h:selectOneRadio> 
</h:panelGroup> 

基本上，所有的無線電按鈕應與標籤在同一行（在我們的案例中爲性別）。

附加是我目前的代碼。單選按鈕出現在下一行。我的PanelGrid有1列。

感謝，

Answer 1

實際上，<h:selectOneRadio>產生<table>它是由一個缺省HTML block element（即總是開始於一個新的線）。

您需要將CSS display屬性設置爲inline-table。

<h:panelGroup> 
    <h:outputLabel for="searchSex" value="#{bundle.Sex_Label}" style="width: 15%;" /> 
    <h:selectOneRadio id="searchSex" value="#{yy.search_Sex}" style="display: inline-table; verticle-align: top; font-size: 95%; color: red;"> 
    <f:selectItem itemLabel="F" itemValue="F" /> 
    <f:selectItem itemLabel="M" itemValue="M" /> 
    </h:selectOneRadio> 
</h:panelGroup> 

但這很笨拙。如果您已經在使用<h:panelGrid>，我建議您將其columns設置爲2，以便您可以在左欄中標註標籤並在右欄中輸入標籤。

<h:panelGrid columns="2"> 
    <h:outputLabel for="searchSex" value="#{bundle.label_sex}" /> 
    <h:selectOneRadio id="searchSex" value="#{yy.searchSex}"> 
    <f:selectItem itemLabel="F" itemValue="F" /> 
    <f:selectItem itemLabel="M" itemValue="M" /> 
    </h:selectOneRadio> 

    <h:outputLabel for="somethingElse" value="Something else" /> 
    <h:inputText id="somethingElse" value="#{yy.somethingElse}" /> 

    ... 
</h:panelGrid>