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

【问题标题】：Align PrimeNG-components next to each other instead of below each other将 PrimeNG 组件彼此相邻对齐，而不是彼此下方对齐
【发布时间】：2019-01-26 15:29:47
【问题描述】：

我正在使用 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>

产生（令我困惑）以下输出：

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

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

适用于原生 Angular 元素，但不适用于这些元素。我还尝试修改width 或将它们与两个不同的div 对齐并将它们彼此相邻对齐，这也没有奏效。我怎样才能使 PrimeNG-Components 工作？

【问题讨论】：

你应该使用 PrimeNg FlexGrid primefaces.org/primeng/#/flexgrid
你得到我的答案了吗？
@selemmn 抱歉，我以为我已经接受了。虽然我现在正在使用 FlexGrid，但你的回答做了我需要的。谢谢你:)

标签： html css angular primeng

【解决方案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.

【讨论】：

【解决方案2】：

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

【讨论】：