JSF 2 panelGrid列格式化 - 统一对齐

Question

我有一个需要显示的多列表单，我使用了这样的JSF panelGrid组件。每个panelgrid都在一个primefaces p：panel元素

中

<h:panelGrid columns="6" cellpadding="1" cellspacing="1" style="width: 100%"  columnClasses="column1">

CSS中的column1是：

.column1 {
width: 14%;

}

它在屏幕上呈现如下图所示。请注意，面板中的列未对齐，看起来很随意。如何以统一的方式对齐表单元素/标签，还可以去掉空格和填充，使表单布局更紧凑。

如果你回答的话，先谢谢BaluSC！你真的是JSF之王： - ）

Answer 1

我还有一个使用JSF PanelGrid的多列表单。

<h:panelGrid id="panelGrid" columns="4" cellpadding="3"
        columnClasses="colLeft,colRight,colLeft,colRight">
        <p:outputLabel for="username" value="Username" />
        <p:inputText id="username" value="#{myBean.user.username}"
            required="true" />

        <p:outputLabel for="fullName" value="Full Name" />
        <p:inputText id="fullName" value="#{myBean.user.fullName}"
            required="true" />

        <p:outputLabel for="password" value="Password" />
        <p:password id="password" value="#{myBean.user.password}"
            required="true" match="passConfirm" />

        <p:outputLabel for="passConfirm"
            value="Re-type Password" />
        <p:password id="passConfirm" value="#{myBean.user.password}"
            required="true" />
</h:panelGrid>

这是CSS。

#panelGrid {
    width: 100%;
}

.colLeft {
    width: 15%;
}

.colRight {
    width: 35%;
}

这是输出。

希望它有效！