4

如何使用左右两列文本的角度列表？

角度网站上显示的基本示例如下：

<mat-list>
 <mat-list-item> Pepper </mat-list-item>
 <mat-list-item> Salt </mat-list-item>
 <mat-list-item> Paprika </mat-list-item>
</mat-list>

我想拆分每个文本<mat-list-item>以显示在两列（左对齐和右对齐）

我尝试了几种方法，包括：

<mat-list>
    <mat-list-item>
         <p style="float:left">Left Text</p>
         <p style="float:right">Right Text</p>
    </mat-list-item>
    <mat-list-item>
         <p style="float:left">Left Text</p>
         <p style="float:right">Right Text</p>
    </mat-list-item>
</mat-list>

但似乎没有一个工作。

如何在不使用网格列表的情况下实现这一目标？

4

2 回答 2

3

您将不得不matLine在您的代码中使用它来使其工作。试试这样，它会工作。

<mat-list>
    <mat-list-item >
      <div matLine>
         <p style="float:left">Left Text</p>
         <p style="float:right">Right Text</p>
        </div>
    </mat-list-item>
    <mat-list-item>
       <div matLine>
         <p style="float:left">Left Text</p>
         <p style="float:right">Right Text</p>
       </div>
    </mat-list-item>
</mat-list>
于 2019-11-13T09:14:35.570 回答
3

您可以通过使用mat-grid-list. 例如，

<mat-grid-list cols="2">
  <mat-grid-tile>
    <mat-list>
      <mat-list-item> Pepper </mat-list-item>
      <mat-list-item> Salt </mat-list-item>
    </mat-list>
  </mat-grid-tile>
  <mat-grid-tile>
    <mat-list>
      <mat-list-item> Pepper </mat-list-item>
      <mat-list-item> Salt </mat-list-item>
    </mat-list>
  </mat-grid-tile>
</mat-grid-list>


如果这对您来说看起来很复杂，您可以轻松地使用 basicbootstrap grids分成两列。例如，

<div class="row">
 <div class="col col-6>
   // You can put your left items here
 </div>
 <div class="col col-6>
  // You can put your right items here
 </div>
</div>
于 2019-11-13T09:24:27.273 回答