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

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>

基本上,所有单选按钮应与标签位于同一行(在我们的例子中为Gender).

附件是我目前的代码.单选按钮出现在下一行.我的PanelGrid有1列.

谢谢,

Answer 1

实际上,<h:selectOneRadio>生成一个<table>默认情况下是HTML块元素(即总是从一个新行开始).

您需要将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>

但这非常笨拙.如果您已经在使用a <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>