p:panelGrid 布局问题答案

【问题标题】：p:panelGrid Layout Issuep:panelGrid 布局问题
【发布时间】：2020-02-06 23:07:31
【问题描述】：

如何实现如下布局？

            First Name  [_________]                     Last Name [_________]

            Street      [_________]

我尝试了一些

https://www.primefaces.org/showcase/ui/panel/panelGrid.xhtml

但结果如下，

First Name[_______]Last Name[_________]
Street[_________]

下面是我试过的代码

<p:panelGrid columns="4" layout="flex" columnClasses="p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4, p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4" contentStyleClass="p-align-baseline ui-fluid">
<p:outputLabel for="First Name" value="First Name" />
<p:inputText id="First Name" />

<p:outputLabel for="Last Name" value="Last Name" />
<p:inputText id="Last Name" />

<p:outputLabel for="Street" value="Street" />
<p:inputText id="Street" />

</p:panelGrid>

我也试过了

<h:panelGrid columns="4"  styleClass="panelNoBorder">


        <p:row>
            <p:column><p:outputLabel value="First Name" /></p:column>
            <p:column>
                <p:inputText id="First Name"
                        value="#{First Name}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>
            </p:column>

            <p:column><p:outputLabel value="Last Name" />   </p:column>
            <p:column>
                <p:inputText id="Last Name"
                        value="#{Last Name}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>  
            </p:column>
        </p:row>

        <p:row>
            <p:column><p:outputLabel value="Street" /></p:column>
            <p:column>
                <p:inputText id="Street"
                        value="#{Street}"
                        maxlength="10" style="width: 20%;">
                    </p:inputText>
            </p:column>

        </p:row>            

</h:panelGrid>

这也和第一个差不多结束了

First Name[_______]Last Name[_________]
Street[_________]

【问题讨论】：

您可以将每列和表格宽度的 25% 定义为允许空间的 100%（或固定大小）
在您的第二次尝试中，请使用 p:panelGrid 而不是 h:panelGrid。见primefaces.org/showcase/ui/panel/panelGrid.xhtml
或者您可以从第二次尝试中删除所有 p:row 和 p:column 元素。
没有任何区别，我应该添加任何内联样式吗？ @Selaron
@JasperdeVries 没有任何区别，我应该添加任何内联样式吗？

标签： css user-interface jsf primefaces

【解决方案1】：

如果你想使用这些 columnClasses，你还需要包含正确的 css。一个简单的解决方案，没有那个 css 类，将 panelGrid 的宽度设置为 100%，将列的宽度设置为 25%，或所需的 %。

【讨论】：