Kendo UI FormField 并排

Question

我正在使用 Kendo-UI 和以下 html 在标签条中创建表单：

<kendo-tabstrip>
<kendo-tabstrip-tab [title]="'Date'" [selected]="true">
    <ng-template kendoTabContent>
        <div class="SearchForm">
            <form class="k-form MySearchForm" [formGroup]="searchByTimeWindowform">
                    <kendo-formfield>
                        <kendo-label [for]="fromDate" text="Start Date:"></kendo-label>
                        <kendo-datepicker kendoTextBox #fromDate [formControlName]="'fromDate'"></kendo-datepicker> 
                        <kendo-formerror>Please provide a start date</kendo-formerror>
                    </kendo-formfield>
                    <kendo-formfield>
                        <kendo-label [for]="endDate" text="End Date:"></kendo-label>
                        <kendo-datepicker kendoTextBox #endDate [formControlName]="'endDate'"></kendo-datepicker> 
                        <kendo-formerror>Please provide an end date</kendo-formerror>
                    </kendo-formfield>
            </form>
           
            <div class="SearchFormButton">
                <button kendoButton (click)="SearchForTimeWindow()"><span span class="k-icon k-i-search"></span>Search</button>
            </div>
        </div>
    </ng-template>
</kendo-tabstrip-tab>

<kendo-tabstrip-tab [title]="'Other tab'">
    <ng-template kendoTabContent>
        <p>other tab...</p>
    </ng-template>
</kendo-tabstrip-tab>

结果如下所示：

然而我想要实现的是将日期选择器并排放置（标签仍在顶部）

像这样：

这可能吗？

我尝试使用 bootstrap 网格，但这似乎在标签条上添加了一个水平滚动条。

Answer 1

感谢 Steve Greene 的帮助，解决方案是使用以下 css：

.wrap {
      display: flex;
      justify-content: space-between;
    }

稍后可以在包装表单域的div中使用

            <div class="wrap">
                <kendo-formfield class="arrival-date">
                  <kendo-label [for]="arrivalDate" text="Arrival Date"></kendo-label>
                  <kendo-datepicker #arrivalDate [formControlName]="'arrivalDate'"></kendo-datepicker>
                    <kendo-formerror>Error: Arrival date is required</kendo-formerror>
                </kendo-formfield>

                <kendo-formfield>
                    <kendo-label [for]="numberOfNights" text="Number of Nights"></kendo-label>
                    <kendo-numerictextbox #numberOfNights [formControlName]="'numberOfNights'" [min]="0"></kendo-numerictextbox>
                        <kendo-formerror>Error: required</kendo-formerror>
                </kendo-formfield>
            </div>

最后，我选择使用 Kendo MultiViewCalendar 组件。

Kendo UI FormField 并排

Kendo UI FormField side by side

html

css

kendo-ui