Question

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

但是，出于某种原因，删除图标显示在实际电子邮件下方的行上。我已经尝试了各种配置 - 无论是在我的LESS / CSS中还是在我的HTML中，都要将电子邮件和删除图标显示在同一行上，但无济于事。我也尝试过一段时间，但仍然没有工作。

另外，为了澄清，包含div中有足够的空间，所以不是问题。我在下面的代码中看到的最新内容是添加＆＃34; display：inline＆＃34;从主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;
}

应该做的伎俩。

获取删除图标以与电子邮件地址相同的行显示

1 个答案: