Html 推特引导导航药片，带“导航药片”；“通知”；未按要求放置

我试图把“通知”图标放在导航药片的上角，但我似乎无法将它们正确放置。当我在li元素中放置跨度时，它会使元素变大，我不希望出现这种行为。如果我试着把它放在li元素之间，它会增加一个空白

导航药丸也有样式，所以除了html和css标记之外，我把它们都放在一个jsbin中

最后，我希望能够将“通知”范围放置在任何角落（可调）

HTML

---

在我看来，这里最容易做的事情是将

.notification

元素放在

中并设置位置。要做到这一点，只需添加：

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

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

正如我在这里所做的：

希望有帮助：）

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

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

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

---

span

在

li

中。您是否尝试将通知span放在锚定标签中？这也是正确的答案，与Inrbob非常相似，因为他是第一个被接受的人。

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

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

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

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