计数指示器在CSS菜单中添加额外的空格

Question

我需要将Faceboook样式计数指示器添加到CSS菜单中。你可以在这里看到它：JSFIDDLE

问题是计数指示器（橙色背景）会产生额外的空间，我无法理解为什么。

第一个问题：

如上图所示，文本“Two”和“Four”（带数字指示符）比文本“One”和“Three”（没有数字指示符）低1px。

第二个问题：

正如您所看到的，文本“Two”（带数字指示符）的左右边距宽度不同。左边距为10px，但右边距宽度为15px。

我的代码：

html{height:100%;}
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote{padding:0;margin:0;}
    body{cursor:default;font:11px/13px verdana,tahoma,arial;color:#333;background-color:#ffffff;}

div#xx2menus{margin:0px auto;width:968px;height:36px;background:#5B4B40;background: -webkit-linear-gradient(#776753, #5B4B40);background: -o-linear-gradient(#776753, #5B4B40);background: -moz-linear-gradient(#776753, #5B4B40);background: linear-gradient(#776753, #5B4B40);border:1px solid #362D26;border-radius:3px;z-index:999}
    #xx2menu,#xx2menu ul{list-style:none;}
    #xx2menu{float:left;font-family:Arial;}
    #xx2menu > li{float: left;}
    #xx2menu li a{display:block;padding:11px 10px 12px 10px;text-decoration:none;}
    #xx2menu ul {position:absolute;display:none;z-index:999;}
    #xx2menu ul li a{width:80px;}
    #xx2menu li:hover ul{display: block;}
    #xx2menu > li > a{color: #fff;font-weight:700;}
    #xx2menu > li:hover > a{background: #EAD593;color: #000;} 
    #xx2menu ul{border-bottom-right-radius:3px;border-bottom-left-radius:3px}
    #xx2menu ul li a{color:#000;}
    #xx2menu ul li:hover a{background: #ffc97c;}

    span.badge{
    display:inline-block;
    padding: 1px 5px 1px 5px;
    text-align:center;
    color:#fff !important;
    font-size:10px;
    line-height:13px;
    /*-webkit-border-radius:3px;*/
    -moz-border-radius:3px;
    border-radius:3px;
    -o-border-radius:3px;
    -khtml-border-radius:3px;
    }
    a span.badge{
    position:relative;
    top:-16px;
    right:5px;
    margin:0;
    }
    span.badge.on{
    background-color:#f60;
    color: #ffffff !important;
    }

    .lsub:nth-child(odd){background-color:#EFDEAB}
    .lsub:nth-child(even){background-color:#EAD593;}

HTML

<div id="xx2menus">
<ul id="xx2menu">
    <li><a href="/">One</a></li>
<li><a href="/">Two<span class="badge on">5</span></a></li>
<li><a href="/">Three</a></li>
<li><a href="/">Four<span class="badge on">17</span></a>
<ul>
<li class="lsub"><a href="/">Submenu1</a></li>
<li class="lsub"><a href="/">Submenu2</a></li>
</ul>
</li>    
</ul>
</div>

Answer 1

这是你的答案，你要做的是 一个span.badge {position：absolute;}但同时你必须改变 li a {position：relative}控制徽章的位置检查下面的代码。

＆＃13;

＆＃13;

html{height:100%;}
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote{padding:0;margin:0;}
    body{cursor:default;font:11px/13px verdana,tahoma,arial;color:#333;background-color:#ffffff;}

div#xx2menus{margin:10px auto 0px;width:968px;height:36px;background:#5B4B40;background: -webkit-linear-gradient(#776753, #5B4B40);background: -o-linear-gradient(#776753, #5B4B40);background: -moz-linear-gradient(#776753, #5B4B40);background: linear-gradient(#776753, #5B4B40);border:1px solid #362D26;border-radius:3px;z-index:999}
    #xx2menu,#xx2menu ul{list-style:none;}
    #xx2menu{float:left;font-family:Arial;}
    #xx2menu > li{float: left;}
    #xx2menu li a{display:block;padding:11px 10px 12px 10px;text-decoration:none;}
    #xx2menu ul {position:absolute;display:none;z-index:999;}
    #xx2menu ul li a{width:80px;}
    #xx2menu li:hover ul{display: block;}
    #xx2menu > li > a{color: #fff;font-weight:700;}
    #xx2menu > li:hover > a{background: #EAD593;color: #000;} 
    #xx2menu ul{border-bottom-right-radius:3px;border-bottom-left-radius:3px}
    #xx2menu ul li a{color:#000; position:relative; display:inline-block;}
    #xx2menu ul li:hover a{background: #ffc97c;}

    span.badge{
    display:inline-block;
    padding: 1px 5px 1px 5px;
    text-align:center;
    color:#fff !important;
    font-size:10px;
    line-height:13px;
    /*-webkit-border-radius:3px;*/
    -moz-border-radius:3px;
    border-radius:3px;
    -o-border-radius:3px;
    -khtml-border-radius:3px;
    }
 li a{ position:relative; display:inline-block;}
a span.badge{
    position:absolute;
    top:-5px;
    right:0px;
    margin:0;
    }
    span.badge.on{
    background-color:#f60;
    color: #ffffff !important;
    }

    .lsub:nth-child(odd){background-color:#EFDEAB}
    .lsub:nth-child(even){background-color:#EAD593;}

＆＃13;

<div id="xx2menus">
  <ul id="xx2menu">
    <li><a href="/">One</a></li>
    <li><a href="/">Two<span class="badge on">5</span></a></li>
    <li><a href="/">Three</a></li>
    <li><a href="/">Four<span class="badge on">17</span></a>
      <ul>
        <li class="lsub"><a href="/">Submenu1</a></li>
        <li class="lsub"><a href="/">Submenu2</a></li>
      </ul>
    </li>    
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要在相对父级内给出徽章绝对位置，并为它们设置一些合适的边距。

#xx2menu > li > a{
    color: #fff;font-weight:700;position: relative;
}

a span.badge{
    position:absolute;
    top:0;
    right:5px;
    margin:-7px -7px 0 0;
}

http://jsfiddle.net/ufj27m4w/12/

Answer 3

将position: relative添加到#xx2menu > li或#xx2menu > li > a和position: absolute添加到a span.badge

＆＃13;

＆＃13;

html{height:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote{padding:0;margin:0;}
body{cursor:default;font:11px/13px verdana,tahoma,arial;color:#333;background-color:#ffffff;}

div#xx2menus{margin:0px auto;width:968px;height:36px;background:#5B4B40;background: -webkit-linear-gradient(#776753, #5B4B40);background: -o-linear-gradient(#776753, #5B4B40);background: -moz-linear-gradient(#776753, #5B4B40);background: linear-gradient(#776753, #5B4B40);border:1px solid #362D26;border-radius:3px;z-index:999}
#xx2menu,#xx2menu ul{list-style:none;}
#xx2menu{float:left;font-family:Arial;}
#xx2menu > li{float: left;position: relative;}
#xx2menu li a{display:block;padding:11px 10px 12px 10px;text-decoration:none;}
#xx2menu ul {position:absolute;display:none;z-index:999;}
#xx2menu ul li a{width:80px;}
#xx2menu li:hover ul{display: block;}
#xx2menu > li > a{color: #fff;font-weight:700;}
#xx2menu > li:hover > a{background: #EAD593;color: #000;} 
#xx2menu ul{border-bottom-right-radius:3px;border-bottom-left-radius:3px}
#xx2menu ul li a{color:#000;}
#xx2menu ul li:hover a{background: #ffc97c;}

span.badge{
  display:inline-block;
  padding: 1px 5px 1px 5px;
  text-align:center;
  color:#fff !important;
  font-size:10px;
  line-height:13px;
  /*-webkit-border-radius:3px;*/
  -moz-border-radius:3px;
  border-radius:3px;
  -o-border-radius:3px;
  -khtml-border-radius:3px;
}
a span.badge{
  position: absolute;
  top: -4px;
  right: 0px;
  margin: 0;
}
span.badge.on{
  background-color:#f60;
  color: #ffffff !important;
}

.lsub:nth-child(odd){background-color:#EFDEAB}
.lsub:nth-child(even){background-color:#EAD593;}

＆＃13;

<div id="xx2menus">
  <ul id="xx2menu">
    <li><a href="/">One</a></li>
    <li><a href="/">Two<span class="badge on">5</span></a></li>
    <li><a href="/">Three</a></li>
    <li><a href="/">Four<span class="badge on">17</span></a>
      <ul>
        <li class="lsub"><a href="/">Submenu1</a></li>
        <li class="lsub"><a href="/">Submenu2</a></li>
      </ul>
    </li>    
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;