无法对齐数据表小平面页脚中的按钮

Question

使用Primefaces 6.1，我想在数据表页脚面上添加几个按钮。当我使用float：left时，按钮向左移动但是页脚部分（div）收缩。

<f:facet name="footer">
    <p:button styleClass="tableButtons" value="Edit" update="msgs"/>
</f:facet>  

默认输出为：

现在如果我添加浮动：

    .tableButtons {
         float: left;
    }

输出结果为：

Answer 1

这是一个基本的CSS问题。容器（在您的情况下为桌脚页面div）的高度为0时，它只有浮动的子项。您可以通过将容器的overflow设置为auto（或hidden）来解决此问题。页脚小平面归入ui-datatable-footer，因此您可以使用此CSS规则：

.ui-datatable-footer {
    overflow: auto;
}

另见：

• Why does 'overflow: auto' clear floats? And why are clear floats needed?
• Why "overflow: hidden" clears a float?

Answer 2

这对我有用。尝试使用margin.right或margin.left放置间隔符。

<p:commandButton id="actionBotton"
                        value="Close"
                        styleClass="classNegative"
                        style="margin-right: 240px;"
                        onclick="dialogEr.hide();"
                        update="dialogEr"
                        />