使用 PrimeNG 创建一个 Div 以在一行中显示 3 个输入字段（密码）

Question

我正在尝试使用 Primeng 创建一个 div 以在一行中显示 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',margin:'0 auto'}">-->
            <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>

这就是输出的样子 -

Answer 1

因为看起来您正在使用引导程序，所以只需使用该类

col-4

三次

<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" class="col-4"
                     [inputStyle]="{'width':'40px', 'background': 'transparent !important;'}" /> 
                  
               <p-password [feedback]="false"  class="col-4"
                     styleClass="username-custom p-password p-component p-inputwrapper p-input-icon-right"
                     [inputStyle]="{'width':'40px', 'background': 'transparent !important;'}" /> 

               <p-password [feedback]="false"  class="col-4"
                     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>