javascript - 让删除图标显示在与电子邮件地址相同的行上

Question

我的 Angular 应用程序中有一些 UI，在电子邮件链接旁边，我有一个删除图标，用户可以使用它来删除电子邮件。删除图标旨在仅在将鼠标悬停在电子邮件上时显示。这一切都按预期工作。

但是，出于某种原因，删除图标显示在实际电子邮件下方的行中。我已经尝试了各种配置——在我的 LESS/CSS 和我的 HTML 中，让电子邮件和删除图标显示在同一行，但无济于事。我也试过用 span 包装，但还是没用。

此外，需要澄清的是，包含的 div 中有足够的空间，所以这不是问题所在。正如您将在下面的代码中看到的，我最近尝试的是将“display: inline”添加到从主 div 调用的类中。但同样，它不起作用。

这是我的模板代码:

<div *ngFor="let email of staff?.emails; let i = index;" class="email-section" [hoverOverFor]="emailRemove">

        <a class="email-display" [href]="'mailto:'+staff.email" title="Email">{{staff.email}}</a> 

             <div #emailRemove hover-content>
                  <button class="email-remove" md-icon-button (click)="removeEmail(i)">
                        <i class="material-icons">delete</i>
                  </button>
             </div>
</div>

我的 LESS/CSS 看起来像这样:

.email-section {
  display: inline;
}

.email-remove {
  opacity: 0.5;
  &:hover
  {
    opacity: 1;
  }
}

.email-display {
  .flex-col;
  .justify-content-center;
}

如何调整我的 LESS/CSS 以获取电子邮件地址和删除图标以显示在同一行？

Answer 1

完全理解这有多令人沮丧，但这似乎是一个简单的问题。您是否有可能不想使用 float:left 的原因？

否则，这是理想的解决方案。请参阅以下 jsFiddle ( https://jsfiddle.net/hwog55p9/ )

.email-display {
  float:left;
  .flex-col;
  .justify-content-center;
}

应该可以解决问题。