时间戳

首页 > 解决方案 > ngFor 中项目之间的水平虚线

css - ngFor 中项目之间的水平虚线

问题描述

我正在使用 ngFor 显示由水平虚线分隔的项目列表，如下所示：

<div *ngFor="let comment of comments;let lastItem = last;">
 <div class="comment-box">
   <div class="comment-author">{{comment.createdBy}}</div>
   <div class="creation-date">{{comment.createdOn}}</div>
   <div class="comment-text">{{comment.text}}</div>
 </div>
 <div class="dashed-line-box" *ngIf="!lastItem">
   <hr class="new1">
 </div>
</div>

.dashed-line-box {
  position: relative;
  background-color: #ffffff;
  width: 320px;
  height: 16px;

 border-style: solid;// to outline the container box
 border-width: thin;
}

hr.new1 {
  position: absolute;
  margin-top: 8px;
  border-top: 1px dashed;
}

我可以看到每个虚线框条目的矩形，但它们不像我期望的那样包含水平线。

我在这里想念什么？

标签： cssangularngfor

解决方案

我想你想要一个虚线边框样式<hr>

hr.new1 {
    position: absolute;
    margin-top: 8px;
    border-top: 1px dashed blue;
    width: 100%;
}

或者，如果您想在外部 div 上使用虚线边框，请尝试以下代码

.dashed-line-box {
    position: relative;
    background-color: #ffffff;
    width: 320px;
    height: 16px;
    border-bottom: 1px dashed green;
}

推荐阅读