固定塊旁邊的小額外鏈接塊

Question

這非常奇怪。下面的代碼：

nav { 
    position:relative; 
} 
ul.navul { 
    padding:0; 
    margin:0; 
    background-color:rgba(12,11,11,0.9); 
} 
.navul li { 
    list-style-type:none; 
    display:inline-block; 
    border-left:1px solid white; 
} 
.navul li:first-child { 
    border-left:none; 
} 
.navul a { 
    display:inline-block; 
    padding:10px; 
    margin:0px; 
    text-decoration:none; 
    color:#fff; 
    border:1px solid blue; 
} 

這裏是我所看到的快照：

小塊鏈接

正如我減少的一個標籤填充，大小的塊變小，反之亦然。我已經將列表樣式類型設置爲「無」。我已經嘗試在'li'標籤上使用填充：0和margin：0，但它似乎不起作用。我真的不知道發生了什麼。

任何人都可以幫忙嗎？

Answer 1

試試這個。我已經去除了藍色邊框，而是添加了白色邊框周圍的錨，而a標籤不是li標籤

nav { 
    position:relative; 
} 
ul.navul { 
    padding:0; 
    margin:0; 
    background-color:rgba(12,11,11,0.9); 
} 
.navul li { 
    list-style-type:none; 
    display:inline-block; 

} 
.navul a:first-child { 
    border-left:none; 
} 
.navul a { 
    display:inline-block; 
    padding:10px; 
    margin:0px; 
    text-decoration:none; 
    color:#fff; 
    border-left:1px solid white; 
}