如何使用PrimeNG实现一行展示3个p-password输入框？

我尝试使用PrimeNG创建一个容器，让3个p-password输入框在一行显示，但编写的HTML代码未能实现该效果。

原代码 #

<div class="login-background" *ngIf="!isUserLoggedIn">
   <div class="login-region" >
      <form [formGroup]="AuthForm" (ngSubmit)="validate()" autocomplete="off" class="d-flex" >
         <p-card subheader="" [style]="{width: '360px'}" class="flex justify-content-center">
            <ng-template pTemplate="header">
               <img alt="Verify" src="../../assets/Images/logo.png" class="logo-image" />
            </ng-template>
                  
            <div class="row">
               <p-password [feedback]="false" 
                     [inputStyle]="{'width':'40px', 'background': 'transparent !important;','margin':'20%;'}" /> 
                  
               <p-password [feedback]="false" 
                     styleClass="username-custom p-password p-component p-inputwrapper p-input-icon-right"
                     [inputStyle]="{'width':'40px', 'background': 'transparent !important;'}" /> 

               <p-password [feedback]="false" 
                     styleClass="username-custom p-password p-component p-inputwrapper p-input-icon-right"
                     [inputStyle]="{'width':'40px', 'background': 'transparent !important;'}" />      
                  
            </div>
                                 
         </p-card>
      </form>
   </div>
</div>

当前问题 #

三个p-password输入框垂直堆叠显示，无法横向排列在同一行。

解决方案 #

利用PrimeNG的Utility Flex类控制布局，调整后代码如下：

<div class="login-background" *ngIf="!isUserLoggedIn">
   <div class="login-region" >
      <form [formGroup]="AuthForm" (ngSubmit)="validate()" autocomplete="off" class="d-flex" >
         <p-card subheader="" [style]="{width: '360px'}" class="flex justify-content-center">
            <ng-template pTemplate="header">
               <img alt="Verify" src="../../assets/Images/logo.png" class="logo-image" />
            </ng-template>
                  
            <!-- 使用Flex布局让输入框横向排列 -->
            <div class="flex flex-row justify-content-center gap-3">
               <p-password [feedback]="false" 
                     [inputStyle]="{'width':'40px', 'background': 'transparent'}" /> 
                  
               <p-password [feedback]="false" 
                     styleClass="username-custom"
                     [inputStyle]="{'width':'40px', 'background': 'transparent'}" /> 

               <p-password [feedback]="false" 
                     styleClass="username-custom"
                     [inputStyle]="{'width':'40px', 'background': 'transparent'}" />      
            </div>
                                 
         </p-card>
      </form>
   </div>
</div>

关键调整点 #

• 将包裹输入框的div类从row改为flex flex-row justify-content-center gap-3：
  • flex flex-row：将容器设置为Flex布局，强制子元素横向排列
  • justify-content-center：让输入框在水平方向居中对齐
  • gap-3：给输入框之间添加固定间距，避免拥挤
• 移除第一个输入框的margin:'20%'属性，该属性会占用过多水平空间导致布局混乱
• 简化styleClass，无需重复添加PrimeNG组件默认自带的p-password、p-component等类

内容的提问来源于stack exchange，提问作者Shivdutt