計數指示器在CSS菜單中添加額外空間

Question

我需要將Faceboook樣式計數指示器添加到CSS菜單。你可以在這裏看到它：JSFIDDLE

問題是，計數指標（與橙色背景）創造額外的空間，我不明白爲什麼。

第一個問題：

，你可以在上面的圖片中看到，該文本「二」和「四有」（有數量指標）的placeed比文本「一」低1px的和「三」（沒有數字指標）。

問題二：

正如你可以看到文本「二」（用數字指標）的左，右頁邊距的寬度是不同的。左邊距的寬度爲10像素，但右邊距的寬度爲15像素。

我的代碼：

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位置：絕對;}但同時你必須改變 li a {position：relative}來控制徽章的位置，檢查下面的代碼。

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;}

<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 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

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

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;}

<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>