使用 ngFor 时，Css 选框文本堆叠在彼此下方

Question

尝试使用 CSS 创建选取框，我设法使它工作，但不是我所期望的。 当我使用 ngFor 提供数据时。

这是我得到的结果

文字相互重叠，现在我被卡住了，我不知道如何解决。

这是工作链接https://stackblitz.com/edit/angular-mzstvh

这是我的 HTML

<div class="message-alert ">
<div  class="container pr-0 pl-0 marquee" >
      <div>
          <a *ngFor="let text of messages">
                    {{text}}
          </a>
      </div>
</div>
</div>

这是 SCSS

.message-alert {
  border-style: solid ;
  height: 70px;
  background-color: $light_gray;
  font-size: 28px;
  padding-top: 15px;

  &:hover{
    .marquee div {
      display: block;
      width: 200%;
      height: 50px;
      position: absolute;
      overflow: hidden;
      animation-play-state:paused;
    }
  }

  .marquee {
    height: 30px;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  .marquee div {
    display: block;
    width: 200%;
    height: 50px;
    position: absolute;
    overflow: hidden;
    animation: marquee 20s linear infinite;
  }

  .marquee a{
    float: left;
    width: 50%;
  }
  @keyframes marquee {
    0% {
      left: 100%;
    } 

    95% {
      left: -100%;
    }

    100% {
      left: -100%;
    }
  }
}

文本应该向左移动，而不是在彼此下方。 对不起，我的英语不好。

Answer 1

可以在 HTML 中使用 marquee 标签：https://stackblitz.com/edit/angular-rzavqc