锚块旁边的小额外连接块

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

以下是我看到的快照：

小块链接

当我减少填充时，＆＃39; a＆＃39;标签，块的大小变小，反之亦然。我已经将list-style-type设为＆＃34; none＆＃34;。我尝试过填充：0和边距：0＆＃39; li＆＃39;标签，但它似乎没有用。我真的不知道发生了什么。

有人可以帮忙吗？

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