Css 删除导航栏元素中的边框分隔

我为我的网站建立了一个简单的中心对齐的导航栏。但是，导航栏中元素的边界并没有完全重叠，呈现出不连贯的外观。我的意思是：

请注意每个链接的双边框。请注意，即使我删除了其中一个边界，悬停效果仍然显示出缺陷：

如何通过创建完全重叠的边界来修复此问题

---

代码如下：

ul.navbar{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#ff9933；
字体大小：90%；
文本对齐：居中；
}
李纳瓦尔{
保证金：自动；
显示：内联块；
右边框：1px实心#ffb366；
左边框：1px实心#ffb366；
}
李娜{
显示：内联块；
颜色：白色；
文本对齐：居中；
左侧填充：10px；
右边填充：10px；
垫面：3件；
垫底：3件；
文字装饰：无；
}
ul.navbar李a：悬停{
背景色：#e67300；
}

如果同时将

li

和

a

元素的

显示值设置为
内联块
，则会解决以下问题：


/*导航栏*/
导航栏{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#ff9933；
字体大小：90%；
文本对齐：居中；
}
李纳瓦尔{
保证金：自动；
显示：内联块；
右边框：1px实心#ffb366；
左边框：1px实心#ffb366；
}
李娜{
显示：内联块；
颜色：白色；
文本对齐：居中；
左侧填充：10px；
右边填充：10px；
垫面：3件；
垫底：3件；
文字装饰：无；
}
ul.navbar李a：悬停{
背景色：#e67300；
}






如果同时将
li
和
a
元素的
显示值设置为
内联块
，则会解决以下问题：


/*导航栏*/
导航栏{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#ff9933；
字体大小：90%；
文本对齐：居中；
}
李纳瓦尔{
保证金：自动；
显示：内联块；
右边框：1px实心#ffb366；
左边框：1px实心#ffb366；
}
李娜{
显示：内联块；
颜色：白色；
文本对齐：居中；
左侧填充：10px；
右边填充：10px；
垫面：3件；
垫底：3件；
文字装饰：无；
}
ul.navbar李a：悬停{
背景色：#e67300；
}






仅向所有
li
项目添加
左边框。对于最后一个，还要添加
右边框

ul.navbar li {
    margin: auto;
    display: inline;
    border-left: 1px solid #ffb366;
}

ul.navbar li:last-child, ul.navbar li:hover{
     border-right: 1px solid #ffb366;
}

更新：问题在于
ul

ul.navbar {
    margin: 0;
    padding: 0;
    background-color: #ff9933;
    text-align: center;
    font-size: 0;
}

ul.navbar li {
    margin: 0;
    font-size: 14px;
    padding:0;
    display: inline-block;
    border-left: 1px solid #ffb366;
    border-right: 1px solid #ffb366;
    width:auto;
}

Plnkr:
仅向所有
li
项目添加
左边框。对于最后一个，还要添加
右边框

ul.navbar li {
    margin: auto;
    display: inline;
    border-left: 1px solid #ffb366;
}

ul.navbar li:last-child, ul.navbar li:hover{
     border-right: 1px solid #ffb366;
}

更新：问题在于
ul

ul.navbar {
    margin: 0;
    padding: 0;
    background-color: #ff9933;
    text-align: center;
    font-size: 0;
}

ul.navbar li {
    margin: 0;
    font-size: 14px;
    padding:0;
    display: inline-block;
    border-left: 1px solid #ffb366;
    border-right: 1px solid #ffb366;
    width:auto;
}

Plnkr:
嗯，内联块元素有一个围绕的“空间”，默认情况下：



ul.navbar{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#ff9933；
字体大小：90%；
文本对齐：居中；
}
李纳瓦尔{
保证金：自动；
显示：内联块；
右边框：1px实心#ffb366；
框大小：边框框；
左边距：-4px；
}
李：第一个孩子{
左边框：1px实心#ffb366；
}
李娜{
显示：内联块；
颜色：白色；
文本对齐：居中；
左侧填充：10px；
右边填充：10px；
垫面：3件；
垫底：3件；
文字装饰：无；
框大小：边框框；
}
ul.navbar李a：悬停{
背景色：#e67300；
}





嗯，默认情况下，内联块元素有一些周围的“空间”：



ul.navbar{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#ff9933；
字体大小：90%；
文本对齐：居中；
}
李纳瓦尔{
保证金：自动；
显示：内联块；
右边框：1px实心#ffb366；
框大小：边框框；
左边距：-4px；
}
李：第一个孩子{
左边框：1px实心#ffb366；
}
李娜{
显示：内联块；
颜色：白色；
文本对齐：居中；
左侧填充：10px；
右边填充：10px；
垫面：3件；
垫底：3件；
文字装饰：无；
框大小：边框框；
}
ul.navbar李a：悬停{
背景色：#e67300；
}





非常特别，当我在这里运行您的代码片段时，它工作正常。但是在我的项目中，除了增加整个导航栏的高度之外，它什么也不做：/n而不考虑整个问题-大多数情况下，每个解决方案可能都不好：）你能在snippet或JSFIDLE中创建一个示例吗？在我的示例中，在问题中包括一个片段，你有
（没有空格和每两个
li
元素之间的换行：）检查我的答案中的更新，还有一个不改变html结构的解决方案