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

---

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

出现这个问题的原因是你使用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%;
}

希望这可以帮助。