Question

我想在JSF1.1环境中实现以下功能：

性别：RadioButtonForFemale女性RadioButtonForMale MALE

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

将JSP / JSF中的单选按钮与其标签对齐

1 个答案: