Html 离子项目列表中的垂直线

我使用的是Ionic和html，我试图在ion列表中的ion项中放置一条垂直线。我想要这样的东西（“全天”之后的彩色线条）：

我试过这样的方法：

<ion-list>
  <ion-item *ngFor=let item of items>
    <div class="verticalLine"></div>
    <div class="line-break">{{ item.longStringFromTSFile }}</div>
  </ion-item>
</ion-list>

// INSIDE SCSS FILE
.verticalLine {
  width:1%;
  height:75%;
  background:green;
  margin: auto;
}

{{item.longStringFromTSFile}
//内部SCSS文件
黄花蛇舌草{
宽度：1%；
身高：75%；
背景：绿色；
保证金：自动；
}

但垂直线有时太长，从这张照片中可以看出：

我真正想要的是：

编辑：垂直线不相等：

尝试以下操作：

.verticalLine {
  width:1%;
  height:50px;
  background:green;
  margin: auto;
}

请记住，将高度设置为75%将与文本的大小成比例。

试试类似的方法

HTML:

---

好的，那么预期的实际结果是什么？因为垂直线现在与文本成比例地增加其高度，如果文本将

demo

垂直线也将变小，如果文本“太大”，则垂直线也将太长，这就是为什么我想让你给我们一个实际的结果，当然，它应该看起来有小文本或大文本确切地说，我想要的是，线是完美地在每个项目的中心（我添加了一张照片），并涵盖所有的文本现在是更好的，但我总是有一些麻烦（看看新的照片）。某些行比其他行细，分隔项目的行被删除或非常小。如果有帮助，请接受解决方案，以便其他ca轻松找到。谢谢这不是我想要的完美解决方案，正如我所说的，还有一些问题。{{item.age}会解决你的问题。你需要固定内容的宽度，这就是为什么行不对齐。我已经解决了这个问题，添加了离子项分隔符，但它们之间的绿色垂直线仍然不同。。。我试过width:3px（css），但不起作用。有什么想法吗？谢谢你的帮助

<ion-content padding>
<ion-list>
  <ion-item *ngFor="let item of items">
    <span item-start style="width:50px;">{{item.name}}</span>
    <div class="verticalLine"></div>
    <div item-end >{{item.age}}</div>
  </ion-item>
</ion-list>

.verticalLine {
  width:1%;
  height:50px;
  background:green;
  margin-top: 0;
  position: relative;
  margin-left: 10%;
}