如何在primefaces列中水平对齐按钮？

Question

我的一个 primefaces UI 出现布局问题。 我基本上有一个包含在 DIV 中的表格，代码如下。最后一列应该包含我想要水平排列的按钮 所以我将它们包含在一个 panelGroup 中

<div style="overflow: auto; height: 300px;">
    <p:dataTable >
        <p:column headerText="Column 1">
        </p:column>
        .
        .
        <p:column headerText="Actions">
            <h:panelGroup layout="span">
                <p:commandButton value="Edit" icon="ui-icon-scissors" />
                <p:commandButton value="Delete" icon="ui-icon-trash" />
            </h:panelGroup>
        </p:column>
    </p:dataTable>
</div>

但是，当它们被渲染时，按钮是垂直排列的。查看 HTML 代码，我注意到按钮都包含在 div 中 所以这就是为什么它们之间有一个换行符。

如何解决这个问题？

谢谢

Answer 1

用<h:panelGrid/> 或<p:panelGroup/> 包装它们。这将呈现一个table，在同一表格行中有两个表格单元格（因此它们必须出现在同一行中）：

h:panelGrid:

<h:panelGrid columns="2">
    <p:commandButton value="Edit" icon="ui-icon-scissors" />
    <p:commandButton value="Delete" icon="ui-icon-trash" />
</h:panelGrid>

与h:panelGroup:

如果您使用 h:panelGroup 而不使用样式、styleClass 或 id 属性，则 layout 属性无效，并且不会在您的按钮周围呈现额外的 html。无论如何，添加样式：

<h:panelGroup style="white-space: nowrap">
    ....
</h:panelGroup>

使它们水平对齐，无论您使用哪个 layout 值。