Primefaces 3.5 / CSS - selectOneMenu和按钮垂直对齐

Question

在Primefaces 3.5中，当你将它们放在一行时，p:selectOneMenu和button的垂直对齐很奇怪。我的用例是：用户从菜单中选择选项，然后单击按钮激活它。问题是 - 两个组件必须在同一行（表行）。

XHTML非常简单：

<h:form>
    <p:selectOneMenu>
        <f:selectItem itemLabel="test" itemValue="test"/>
    </p:selectOneMenu>
    <p:commandButton value="GO"/>
</h:form>

不幸的是，结果不符合我的预期：

我的期望恰恰相反：或

我尝试用Firebug研究渲染的HTML代码，但老实说，我很难找到任何CSS边距，填充，左边，顶部或类似的东西可以帮助我。

任何人都在努力解决这个问题（希望 - 解决它）？

Answer 1

解决方案是：

    <style type="text/css">
        .selectMenu { display: inline-block; vertical-align: top; }
    </style>
    <h:form>
        <p:selectOneMenu styleClass="selectMenu">
            <f:selectItem itemLabel="test" itemValue="test"/>
        </p:selectOneMenu>
        <p:commandButton value="GO"/>
    </h:form>

Answer 2

您可以使用panelGrid轻松自动对齐它们。

<h:form>
  <h:panelGrid columns="2">
    <p:selectOneMenu>
        <f:selectItem itemLabel="test" itemValue="test"/>
    </p:selectOneMenu>
    <p:commandButton value="GO"/>
  </h:panelGrid>
</h:form>