如何在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 ：

如果使用沒有style，styleClass或id屬性的h:panelGroup ，則layout屬性不起作用，並且不會在按鈕周圍呈現其他html。 無論如何，添加樣式：

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

無論您使用哪種layout值，它們都會水平對齊。