将PrimeNG组件彼此相邻而不是彼此下方对齐

Question

我正在使用我想彼此对齐的PrimeNG组件pInputText和p-dropdown。我有以下代码：

<div class="main-div">
  <div class="block-div">
  <h4 class="input-description">Enter Information:</h4>
  <span class="ui-float-label">
    <input id="psp-input" type="text" pInputText [(ngModel)]="pspNumber"/>
    <label for="psp-input">{{projectNumber}}.{{pspNumber}}</label>
  </span>
  <h4 class="input-description">Select Type:</h4>
  <p-dropdown [options]="orderTypes" [(ngModel)]="selectedOrderType" [optionLabel]="Typ"></p-dropdown>
  </div>
</div>

产生（对我来说令人困惑）以下输出：

如何使它们彼此对齐？我想将它们对齐到inline-block中的div中：

.block-div {
    display: inline-block;
}

适用于本地Angular元素，但不适用于这些元素。我还尝试修改width或将它们对齐到两个不同的div并将它们彼此对齐，这也没有解决。我该如何针对PrimeNG-Components进行这项工作？

Answer 1

尝试将每个零件（组件及其标题）分组在一个简单的 div 标签内：

  <div class="block-div">

    <div>

     <h4 class="input-description">Enter Information:</h4>
     <span class="ui-float-label">
      <input id="psp-input" type="text" pInputText [(ngModel)]="pspNumber"/>
      <label for="psp-input"></label>
     </span>

    </div>

    <div>

      <h4 class="input-description">Select Type:</h4>
      <p-dropdown [options]="orderTypes" [(ngModel)]="selectedOrderType" optionLabel="Typ"></p-dropdown>

    </div>

  </div>

然后将您的 css 更改为：

 .block-div {
   display: inline-flex;
 }

Working demo.

Answer 2

尝试按表格，tr和td标签分组，这在Edge浏览器的p-calendar标签中解决了类似的问题。