p:面板网格布局问题

Question

如何实现如下所示的布局？

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[_________] 

Answer 1

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