离子项列表中的垂直线

Question

我正在使用Ionic和html，我试图在离子列表中的离子项中放置一条垂直线。 我想要这样的东西（'全天'之后的彩色线条）： 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

我真正想要的是： 预期的结果

编辑：垂直线不等于： 新照片

Answer 1

试试像例子

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

Answer 2

尝试这个 ：

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

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