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

Question

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

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

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

我的模板代码如下所示：

<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;
}

应该可以解决问题。

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

Getting Delete Icon to Display on Same Line as Email Address

html

javascript

css

less

angular