列表中的徽章放置宽度：49％

Question

我有一个标签，如下图所示。

这里的问题是铃铛的徽章不在正确的位置，我无法解决这个问题。

<ul class="nav nav-tabs ">
    <li class="active" id="received_fs_li" style="width: 49%;">
        <a  id="received_fs_link" class="text-center" href="#" data-toggle="tab">
            <i class="fa fa-arrow-up" aria-hidden="true"></i></a>
    </li>
    <li id="sent_fs_li" style="width: 49%;">
        <a id="sent_fs_link" class="text-center" href="#" data-toggle="tab">
        <i class="fa fa-bell" aria-hidden="true"></i></a>
            <span class="badge" id="badge-new-friendship">1</span>

    </li>
</ul>

与代码有关的CSS就是这个：

.navbar-right .badge {
    background-color: #1ab394;
    font-size: 9px;
    padding: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    right: 0;
    top: 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
}

但对我来说，问题来自于width: 49%;，因为如果我删除它，徽章看起来不错，但它看起来不漂亮，因为列表不占用全宽... 感谢

Answer 1

首先，徽章在另一个元素中用作<span/>，例如：

<a href="#">Inbox <span class="badge">42</span></a>

下面的代码段来自您的代码并进行了上述更正：

＆＃13;

＆＃13;

.badge {
  background-color: #1ab394;
  font-size: 9px;
  padding: 0;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  position: absolute;
  right: 0;
  top: 3px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
  <li class="active" id="received_fs_li" style="width: 49%;">
    <a id="received_fs_link" class="text-center" href="#" data-toggle="tab">
      First tab
      <i class="fa fa-lg fa-arrow-up pull-right" aria-hidden="true"></i>
    </a>
  </li>
  <li id="sent_fs_li" style="width: 49%;">
    <a id="sent_fs_link" class="text-center" href="#" data-toggle="tab">
      Second tab
      <i class="fa fa-lg fa-bell pull-right" aria-hidden="true"></i>
      <span class="badge" id="badge-new-friendship">2</span>
    </a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;