CSS 在一行中显示 Angular 扩展面板元素

Question

我在我的项目中使用 Angular <mat-expansion-panel>。

我无法在 one line 上显示 Frate, Kunda and date 和 its value。

我已经尝试使用各种 css 属性，例如 white-space: nowrap;，但其中 none 对我有用

工作演示 - https://stackblitz.com/edit/mat-expansion-panel-en61pv?file=app%2Fexpansion-overview-example.html

.html


<div class="row">
  <div class="col-sm-7">
    <dl class="row property_set">
      <mat-accordion style="width:50%">
        <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <dt class="col-sm-4 record_property">Term</dt>
            </mat-panel-title>
            <mat-panel-description>
              <dd class="col-sm-8 record_property_value term_name">

                <span >
              {{name1}}
            </span>
              </dd>
            </mat-panel-description>
          </mat-expansion-panel-header>

          <dt class="col-sm-4 record_property">Frate</dt>
          <dd class="col-sm-8 record_property_value" data-property-type="select">{{id}}</dd>

          <dt class="col-sm-4 record_property">Kunda</dt>
          <dd class="col-sm-8 record_property_value" data-property-type="select">

            <span>{{text1}}</span>
          </dd>

          <dt class="col-sm-4 record_property">Date</dt>
          <dd class="col-sm-8 record_property_value">{{date}}</dd>
        </mat-expansion-panel>
      </mat-accordion>
    </dl>
  </div>
</div>

.ts 文件

export class AppComponent {
   term: string = 'This is term'
  name1: string = 'This is name'
  id: string = 'This is id'
  text: string = 'This is text'
  text1: string = 'This is term1'
  date: string = 'This is date'
  panelOpenState = false;
}

Answer 1

::ng-deep .property_set .mat-expansion-panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

将其添加到您的 css 文件中。它应该工作。

CSS 在一行中显示 Angular 扩展面板元素

CSS display Angular expansion panel element in one line

html

css

angular

mat-expansion-panel