html - ionic 项目列表中的垂直线

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

尝试类似 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%;
}