时间戳

首页 > 解决方案 > 在非绝对位置上显示带有徽章（计数新消息）的图标

html - 在非绝对位置上显示带有徽章（计数新消息）的图标

问题描述

我在我的 HTML 应用程序上使用 UIkit ( https://getuikit.com )。

现在我想要一个图标，显示带有许多新消息的徽章。

这个图标在我的笔记本电脑上工作正常，但如果我使用的是非画布，它不会显示在正确的位置。

我创建了一个 codepen 来演示这一点：

https://codepen.io/spqrinc/pen/RvaZMJ

这是我的徽章CSS：

.tpl-badge-icon {
  position: absolute;
  top: -50%;
  right: 0%;
}

单击“为 Off-Canvas 单击我”以切换 off-canvas 元素。

标签： htmlcssgetuikit

解决方案

这是因为您.bar-bottom的侧边栏宽度不同（如果您检查，宽度为 270px）并且影响到 li 宽度，因为它使用百分比。您可以通过将.box-bottom宽度从 240px 更改为 270px 或添加此类来操作侧边栏 li width 来修复它：

.uk-subnav.uk-flex.uk-flex-center.uk-child-width-1-5.uk-grid li 
{
  width: 52px;
}

推荐阅读