ngFor 中项目之间的水平虚线答案

【问题标题】：Horizontal dashed line between items in ngForngFor 中项目之间的水平虚线
【发布时间】：2019-12-12 15:04:51
【问题描述】：

我正在使用 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;
}

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

我在这里错过了什么？

【问题讨论】：

您已将虚线框类应用于 div，因此它创建了矩形，只需从 div 中删除该类并尝试

标签： css angular ngfor

【解决方案1】：

.dashed-line-box类中的css属性border-style: solid;将框放在最后一行；要获得水平条，您需要从hr.new1类中删除position:absolute；

相关css：

p {
  font-family: Lato;
}

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

 /* border-style: solid;*/
 border-width: thin;
}

hr.new1 {

  margin-top: 8px;
  border-top: 1px dashed;
}

工作stackblitz here

【讨论】：

谢谢。它部分工作。我在列表中有 3 个元素。我在第二个元素之后得到了行，但不是第一个。

【解决方案2】：

我想你想要<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;
}

【讨论】：

【解决方案3】：

当您可以使用border bottom 属性实现这一目标时，为什么需要 hr。只需将一个类添加到父 div 并使用底部边框。

.box {
  border-bottom: 1px dashed;
}

<div class="box" *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>

【讨论】：