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

我真正想要的是： 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%;
}

Answer 2

尝试：

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

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

离子项目列表中的垂直线

2 个答案: