3

我在我的一个 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 中，这就是它们之间有换行符的原因。

如何解决这个问题？

谢谢

4

1 回答 1

8

<h:panelGrid/>用 a或 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:panelGroup>

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

于 2012-10-30T06:02:45.770 回答