1

我试图将“通知”图标放在导航药丸的上角，但我似乎无法正确放置它们。当我将跨度放在 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

4

2 回答 2

1

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

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

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

是在span里面li。

于 2013-05-09T17:22:25.110 回答
1

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

.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

希望能帮助到你 ：）

于 2013-05-09T17:20:31.697 回答