如何在材料中并排对齐两个 ng 选择组件

Question

在垫子扩展面板中选择。我正在尝试并排放置我的两个 ng 选择，但即使我更改了宽度。我似乎无法将它们并排放置。我去了一些文档和其中一个演示。他们似乎并排使用两个 ng 选择。但是，我认为他们正在使用boostrap来完成这项工作。ngselect 是否默认使用增强说唱，或者我如何在材料中记下它？

这是我正在努力实现的一个例子。 https://ng-select.github.io/ng-select#/forms 我尝试以这种方式更改宽度： .ng-select.ExtraalRecipientFormCustom ：：ng-deep .ng-select-container {
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或材料。我认为您没有完全理解 css 中的display属性。由于默认的display: block;样式，ng-select 组件最终位于不同的行上。您可以给出 ng-select 和 mat-form-fielddisplay: 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;
}

有关弹性框的更多详细信息，请参阅此链接。另外，请参阅我到目前为止所解释的堆栈闪电战示例。