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

Question

p:selectOneMenu在 Primefaces 3.5 中，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>