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

用a <h:panelGrid/>或a 包裹它们<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没有style,styleClass或id属性,则该layout属性不起作用,并且不会在按钮周围呈现其他html.无论如何,添加样式:

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

无论layout您使用哪种值,它们都会水平对齐.