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

Question

我正在为我的一个项目使用 Materialize 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-badgeto括起来.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;
}

但现在的问题是下拉通知列表有一个空格。

发生此问题的原因是您正在使用position:relative这notification-badge意味着它仍然占用它原来所在的空间。

您需要做的是notif向通知添加类并将其位置设置为绝对；

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

希望这可以帮助。