Kendo并排

Question

我使用Kendo和下面的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>

结果如下：

​

​

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

就像这样：

​

​

这有可能吗？

我尝试使用引导网格，但这似乎添加了一个水平滚动条到制表带。

Answer 1

在Steve的帮助下，解决方案是使用以下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组件。