如何在 material 中并排对齐两个 ng-select 组件

Question

select 在垫子扩展面板中。我试图让我的两个 ng-selects 并排，但即使我改变了宽度。我似乎无法将它们并排放置。我去看了一些文档和其中一个演示。他们似乎并排使用两个 ng-selects。但是，我认为他们正在使用 boostrap 来完成这项工作。 ngselect 是否默认使用 boostrap 或如何在 material 中使用它？

这是我正在努力实现的一个例子。 https://ng-select.github.io/ng-select#/forms 我尝试以这种方式更改宽度： .ng-select.AdditionalRecipientFormcustom ::ng-深 .ng-select-容器 {
width:30%； }

            <mat-expansion-panel [(expanded)]="xpandStatus" #formDirectiveTwo="ngForm" [formGroup]="AdditionalRecipientForm"> 
              <mat-expansion-panel-header   [collapsedHeight]="customCollapsedHeight" [expandedHeight]="customExpandedHeight" >
                <mat-panel-title>
                  Add Recipients To The Report
                </mat-panel-title>
              </mat-expansion-panel-header>
              <button mat-raised-button (click)="externalLogin()"   color="primary" >Create Recipient</button>
              <br>
                  <ng-select class="AdditionalRecipientFormcustom"
                  [items]="recipients"
                  [hideSelected]="true"
                  #select
                  loadingText="Loading..."
                  [selectOnTab] = "true"
                  dropdownPosition="auto"
                  bindLabel="Email"
                  placeholder="Select Recipient"

                  formControlName="UserRecipientsDto">
           <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
              <div><span [ngOptionHighlight]="search">Email: {{item.Email}} </span><span>, </span><span [ngOptionHighlight]="search">Name: {{item.FirstAndLast }}</span></div>
           </ng-template>
       </ng-select>
                   <mat-form-field class="add-addtional-recipients-form-field">
                       <mat-label>Contact Name</mat-label>
                     <input  matInput placeholder="User Email Address"   formControlName="FirstAndLast">
                   </mat-form-field>
      <ng-select class="AdditionalRecipientFormcustom"
                  [items]="recipientTypes"
                  [hideSelected]="true"
                  #select
                  loadingText="Loading..."
                  [selectOnTab] = "true"
                  dropdownPosition="auto"
                  bindLabel="typerecipient"
                  placeholder="Select Type Of Recipient"

                  formControlName="TaskRecipientTypeDto">
           <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
               <div><span [ngOptionHighlight]="search">{{item.typerecipient}}</span></div>
           </ng-template>
       </ng-select>
                  <br>
                  <button mat-raised-button class="btnUpdate"  (click)="resetFieldsForAdditionalForm()" [disabled]="!AdditionalRecipientForm.valid" color="primary"><b>Reset</b></button>
                  <button mat-raised-button class="btnReset" (click)="createNewRecipientUser(); this.getLogins(); " color="primary"><b>Update</b></button>
                  <br>
            </mat-expansion-panel>

Answer 1

该问题并非特定于 ng-select 或 material。我认为您没有完全理解 css 中的 display 属性。由于默认的 display: block; 样式，ng-select 组件最终出现在不同的行中。你可以给 ng-selects 和 mat-form-field display: inline-block; 或者用 flexbox 解决它：

// apply this class to the parent element of the form controls (ng-select, ...)
.example-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

// give ng-select a fixed width, because it isn't limited by the viewport width now
ng-select {
  width: 200px;
}

有关 flexbox 的更多详细信息，see this link. Also, see a stackblitz example 我目前已解释的内容。

如何在 material 中并排对齐两个 ng-select 组件

How to align two ng-select components side by side in material

css

styles

angular-material

angular-ngselect