4

I want to implement a notification counter which rolls up to show incremented number.(Like the one google shows with google+ notifications) I can't get overflow:hidden to work for .notif-surround. Its child element's(the one with three numbers) height is larger and still it's visible. I want its appropriate portion to be visible. How do I do that?

jsfiddle demo

html

<div id="top_navbar" class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="brand" href="/">Name</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="span6 offset1">
            <form class="navbar-form form-search">
              <div class="input-append">
                <input class="span4 search-query" type="text" placeholder="Search...">
                <button type="submit" class="btn">Search</button>
              </div>
            </form>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <span class="notif-surround"><span class="badge badge-info notif-background" >&nbsp;</span><span id="num_notif">0<br/>1<br/>2</span></span><b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li class="nav-header">Notifications</li>
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Messages</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
          <!-- <li><i class="icon-exclamation-sign icon-white"></i></li> -->
          <li class="dropdown">
            <img class="img-rounded img-profile inline" src="{{user['picture']['data']['url']}}" />
            <a href="#" class="dropdown-toggle profile-name" data-toggle="dropdown">{{user['name']}} <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

css

.notif-background{
    width:18px;
    height:14px;
}
#num_notif{
    position: relative;
    float: right;
    left: -38px;
    color: #fff;
    height:18px;
    
    bottom:20px;
}
.notif-surround{
    overflow:hidden;
}
4

1 回答 1

2

设置display: inline-block在.notif-surround span.

.notif-surround{
  overflow:hidden;
  display: inline-block;
}

问题是您无法在设置为 的元素上设置溢出隐藏display: inline，这是 a 的默认值span，因为您无法设置其宽度和高度。设置display: block或display: inline-block修复此问题，第一个强制换行，后者保留原始元素流。

于 2013-04-26T23:12:07.943 回答