离子项目列表中的垂直线

Question

我正在使用 Ionic 和 html，我正在尝试在 ion-list 中的 ion-item 内放置一条垂直线。我想要这样的东西（“全天”后的彩色线）：https://cdn.cultofmac.com/wp-content/uploads/2015/04/IMG_1723-640x360.jpg

我尝试过这样的事情：

<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;
}

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

我真正想要的是： expected result

编辑：垂直线不等于：new photo

Answer 1

试试这个：

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

记住设置height 75% 将与文本的大小成正比。

Answer 2

尝试类似example

HTML：

<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>

css:

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