html - 使用 angular2/4 Material ，如何使用 mat-chip 和每行芯片旁边的文本？

Question

使用 angular2/4，我想将 mat-chip ( https://material.angular.io/components/chips/overview ) 与单个芯片旁边的文本一起使用，并让它占据每个“条目”的整个宽度(div 中的一行)。其他条目应像正在运行的聊天一样显示在彼此下方。现在我有:

我现在的代码如下，但是看起来并没有达到预期的效果……

<div class="rectanglebox" style="width:300px;height:500px;">
<div style="float:left">
<mat-chip-list>
  <mat-chip>A</mat-chip>
</mat-chip-list>
</div>
<div style="float:left">Text for A that is really long and may overflow. If it does, the chip should remain to the left side and not move all the text to a new dedicated line.</div>
</div>
</div>
<div style="float:left">
<mat-chip-list>
  <mat-chip>B</mat-chip>
</mat-chip-list>
</div>
<div style="float:left">Text for B</div>
</div>
<div style="float:left">
<mat-chip-list>
  <mat-chip>C</mat-chip>
</mat-chip-list>
</div>
<div style="float:left">Text for C</div>
</div>

修改了示例，该示例显示了如果文本太长而不是环绕它，所有文本将如何“低于”芯片: https://stackblitz.com/edit/angular-ijhhz3-fn56yj?file=app/chips-overview-example.html

Answer 1

你可以使用 style="display: inline-block" 来显示你想要显示的 div，我已经修改了你的 HTML 你可以在这里检查，固定 div 你需要使用 postion 属性的CSS。我已经使用 position: absolute 了解更多信息，您可以查看 here

 <div class="rectanglebox" style="width:300px;height:500px;">
<div style="display: inline-block;position: absolute;">
<mat-chip-list>
  <mat-chip>A</mat-chip>
</mat-chip-list>
</div>
<div style="display: inline-block;margin-left: 45px;">Text for A where something is super long that ehrere sids sdis fdf ds f sdf sd fs d fs fsd f s fsd f sf df s fs fd Text for A where something is super long that ehrere sids sdis fdf ds f sdf sd fs d fs fsd f s fsd f sf df s fs fd Text for C long that ehrere sids sdis fdf ds f sdf sd fs d fs fsd f s fsd f sf df s fs fd margin-left: 45px;</div>

<div>
<div style="display: inline-block;position: absolute;">
<mat-chip-list aria-orientation="vertical"> 
  <mat-chip>B</mat-chip>
</mat-chip-list>
</div>
<div style="display: inline-block;margin-left: 45px;">Text for B Text for A where something is super long that ehrere sids sdis fdf ds f sdf sd fs d fs fsd f s fsd f sf df s fs fd margin-left: 45px;</div>
</div>
<div style="display: inline-block;position: absolute;">
<mat-chip-list>
  <mat-chip>C</mat-chip>
</mat-chip-list>
</div>
<div style="display: inline-block;margin-left: 45px;" >Text for C long that ehrere sids sdis fdf ds f sdf sd fs d fs fsd f s fsd f sf df s fs fd margin-left: 45px;</div>
</div>

看看here