css - 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%;
}

这里是输出。

希望它有效！