Twitter Bootstrap Nav-pills中的“通知”未按预期放置

Question

我试着把“通知”图标放在我的导航药丸的上角，但是我似乎不能把它们放在正确的位置。当我将跨度放在li元素中时，它会使元素变得更大，我不想要这种行为。如果我试图把它放在li元素之间，它会添加一个空格。

nav pills也有样式，所以除了html和css标记之外，我还把它们都放到了一个jsbin中。

最后，我希望能够将“通知”跨度放在任何角落(可调整)

HTML

  <ul id="contentFirstMenu" class="nav nav-pills">
    <li><a href="#viewFullText">Something</a></li>
    <span class="notification">5</span>
    <li><a href="#inTheLibrary">Something</a><span class="notification">20</span></li>

    <li><a href="#requestACopy">Another</a></li>
    <li><a href="#requestACopy">Another</a></li>
  </ul>

通知CSS

.notification {
    color: #222;
    position: relative;
    background: #fff;
    border: 1px solid #830600;
    border-radius: 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    font-weight: bold;
    font-size: 12px;
    -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
    padding: 0 7px;
}

http://jsbin.com/ohofus/2/edit

Answer 1

在我看来，这里最简单的做法是将.notification元素放在<li/>中并设置位置。为此，只需添加：

.notification {
    top: 0; /* to align to top....*/
}

#contentFirstMenu > li {
    position: relative; /* ensures the spans are positioned according to this elements bounds */
}

正如我在这里所做的：http://jsbin.com/ohofus/7

希望它能有所帮助:)

Answer 2

我不确定this是否是你想要的，我补充道：

#contentFirstMenu > li {
    // width: 70px;
    position: relative;
}

.notification {
    position: absolute;
    top: -10px;
    right:-12px;
    z-index: 2;
}

span位于li内部。