css - 如何在 panelGrid 中对齐 outputLabel 和 selectOneMenu

Question

我需要像这个基本示例一样使用p:outputLabel和p:selectOneMenu进行简单的对齐

但是，它只是在我使用 p:inputText 时起作用。

我需要这样的东西：

<p:panelGrid columns="2">

    <h:outputLabel for="idName" value="* #{msg.select_name}: " required="true" />
    <p:selectOneMenu id="idSName" value="#{manage.name}">  
            <f:selectItems value="#{manage.listNames}"  />
    </p:selectOneMenu> 

    <h:outputLabel for="idCountry" value="#{msg.select_country}: " required="true" />
    <p:selectOneMenu id="idCountryCustomer" value="#{manage.countrySelected}">  
                    <f:selectItems value="#{manage.listCountryCustomer}"  />  
    </p:selectOneMenu>

</p:panelGrid>

Answer 1

你p:selectOneMenu应该申请vertical-align:middle：

<p:selectOneMenu id="idSName" value="#{manage.name}" style="vertical-align:middle;">  
        <f:selectItems value="#{manage.listNames}"  />
</p:selectOneMenu>

Answer 2

您for="idName"在您的 中使用过<h:outputLabel>，但是 id<p:selectOneMenu>是“idSName”。名称必须匹配。

您也可以尝试<p:outputLabel>代替<h:outputLabel>.