html - 需要帮助导航栏通知按钮

Question

我的导航栏通知按钮有问题， 按钮调整导航栏的大小。

example

这是代码

.badge-notify{
           background:red;
           position:relative;
           top: -20px;
           left: -35px;
        }

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">

        
          <button class="btn btn-lg btn-link">
            <span class="glyphicon glyphicon-envelope"></span>
          </button>
          <span class="badge badge-notify">3</span>
        

        </a></li>

我不知道是 css 问题还是什么，按钮在导航栏上创建了一个空白区域。

可能是问题

Answer 1

首先，链接中的按钮是无效的 HTML，因此要么只使用链接，要么只使用按钮……不能同时使用。

您需要将第二个跨度放在按钮(或链接)的内并绝对定位。

.btn-link {
  position: relative;
}

.badge-notify {
  background: red;
  position: absolute !important;
  top: -15px; /* adjust as required*/
  right: 5px; /* adjust as required*/
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-center">
  <li>
    <button class="btn btn-lg btn-link">
      <span class="glyphicon glyphicon-envelope"></span>
      <span class="badge badge-notify">3</span>
    </button>
  </li>
</ul>