Question

使用angular2 / 4，我想在单个芯片旁边使用mat-chip（https://material.angular.io/components/chips/overview）和文本，并且每个条目都占据整个宽度＆＃39; （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>

使用示例显示所有文本的内容＆＃34;以下＆＃34;芯片如果太长而不是缠绕它： https://stackblitz.com/edit/angular-ijhhz3-fn56yj?file=app/chips-overview-example.html

Answer 1

您可以将style="display: inline-block"用于您要显示的div，我已经修改了您可以在这里查看的HTML，要修复div您需要使用css的postion属性。我使用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

使用angular2 / 4材料，如何在每行芯片旁边使用带有文本的垫片？

1 个答案: