css - Materialise CSS 通知计数不显示计数数字

Question

我正在为我的一个元素使用 Materialise CSS。我正在尝试在图标上显示通知计数。这是我的代码:

<a class="dropdown-trigger" href="#!" data-activates="notification"> <i class="material-icons white-text ">notifications <small class="notification-badge">5</small></i></a>

CSS 样式

.notification-badge {
    position: relative;
    right: 5px;
    top: -20px;
    color: #941e1e;
    background-color: #f5f1f2;
    margin: 0 -.8em;
    border-radius: 50%;
    padding: 4px 5px;
}

这是我得到的输出。除了通知计数 (5) 未显示外，一切都很好。

我尝试了 davecar21 的方法并将 CSS 更改为以下内容:

.notification-badge {
    position: relative;
    right: -20px;
    top: -80px;
    color: #941e1e;
    background-color: #fff;
    margin: 0 -.8em;
    border-radius: 50%;
    padding: 5px 10px;
}

但现在的问题是下拉通知列表有一个空间。检查下图。如何解决这个问题？

这是我的导航代码。

<div class="navbar-fixed">
    <nav class="orange darken-3">

    <div class="nav-wrapper container">

      <a href="/" class="brand-logo">KnowYourGST</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="/blog/">Articles</a></li>
        <li><a href="/qa/">Q&A</a></li>
        <li><a href="/invoice/">Invoicing</a></li>
        <li><a class="dropdown-trigger" href="#!" data-activates="dropdown1">Acts and Law<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="/search/"><i class="material-icons">search</i></a></li>

        <li><a class="dropdown-trigger" href="#!" data-activates="notification"> <i class="material-icons grey-text ">notifications</i><small class="notification-badge">5</small> </a></li>
        <li><a class="dropdown-trigger" href="#!" data-activates="profile">Knowyourgst<i class="material-icons right">arrow_drop_down</i></a></li>

      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a href="/blog/">Articles</a></li>
        <li><a href="/qa/">Q&A</a></li>
        <li><a href="/invoice/">Invoicing</a></li>
        <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Acts and Law<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="/search/"><i class="material-icons">search</i></a></li>

        <li><a class="dropdown-trigger" href="#!" data-target="notification">Notification<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a class="dropdown-trigger" href="#!" data-target="profile">Knowyourgst<i class="material-icons right">arrow_drop_down</i></a></li>

      </ul>
    </div>

  </nav>
  </div>

Answer 1

要解决该问题，请不要将您的 .notification-badge 附在 .material-icons 中，因为 .notification-badge 将继承.white-text 颜色。

<a class="dropdown-trigger" href="#!" data-activates="notification">
  <i class="material-icons white-text ">notifications</i>
  <small class="notification-badge">5</small>
</a>

然后添加一些填充以实现徽章圈

.notification-badge {
    position: relative;
    right: 5px;
    top: -20px;
    color: #941e1e;
    background-color: #f5f1f2;
    margin: 0 -.8em;
    border-radius: 50%;
    padding: 5px 10px;
}

---

But now the issue is that dropdown notification list has a space.

出现此问题的原因是您正在对 notification-badge 使用 position:relative 这意味着它仍在占用其来源的空间.

你需要做的是在通知中添加类notif，并设置它的position为absolute；

.notif{
  position: absolute;
}

.

<i class="material-icons grey-text notif">notifications</i>

然后设置.notification-badge的样式

.notification-badge {
  position:relative;
  padding:5px 9px;
  background-color: #fff;
  color: #941e1e;
  bottom: 15px;
  left: 15px;
  border-radius: 50%;
}

希望这对您有所帮助。