带有“通知”的Twitter Bootstrap Nav药丸未按要求放置

Question

我正在尝试将“通知”图标放在导航丸的右上角，但是我似乎无法正确放置它们。 当我将跨度放在li元素中时，它将使该元素变大，并且我不希望这种行为。 如果我尝试将其放在li元素之间，则会添加一个空格。

导航药丸也有样式，因此除了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

我不确定这是否是您想要的，我补充说：

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

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

span在li 。