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

Question

我为我的网站构建了一个简单的中心对齐导航栏。但是，导航栏中元素的边框不完全重叠，呈现出脱节的外观。这就是我的意思：

请注意每个链接的双边框。请注意，即使我删除了其中一个边框，悬停效果仍然会显示出不完美之处：

如何通过创建完全重叠的边框来解决此问题？

以下是代码：

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size:90%;
    text-align: center;
    }

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


    ul.navbar li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        text-decoration: none;
    }

    ul.navbar li a:hover {
        background-color: #e67300;
    }

<ul class="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#"><b>New Account</b></a></li>
    <li><a href="#">Old Account</a></li>
</ul>

Answer 1

嗯，内联块元素默认包含一些“空格”：

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

*f

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size:90%;
    text-align: center;
    }

    ul.navbar li {
        margin: auto;
        display: inline-block;
        border-right: 1px solid #ffb366;
          box-sizing:border-box;
          margin-left:-4px;
     
    }
ul.navbar li:first-child {
   border-left: 1px solid #ffb366;
}

    ul.navbar li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 3px;
        padding-bottom: 3px;
        text-decoration: none;
        box-sizing:border-box;
    }

    ul.navbar li a:hover {
        background-color: #e67300;
    }

另外，保持恰到好处的边框，并将左边框放在第一个边框....

Answer 2

如果您将li和a元素的display值都设置为inline-block，则会解决您遇到的问题：

＆＃13;

＆＃13;

/* navigation bar*/

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size:90%;
    text-align: center;
}

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

ul.navbar li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-decoration: none;
}

ul.navbar li a:hover {
    background-color: #e67300;
}

＆＃13;

<ul class="navbar">
  <li>
    <a href="#">Link 1</a>
  </li><li>
    <a href="#">Link 2</a>
  </li><li>
    <a href="#">Link 3</a>
  </li><li>
    <a href="#">Link 4</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

这也允许您hover菜单中的整个项目（而不仅仅是其中的一部分）。

另一个选项

（不更改HTML结构）是更改ul元素的字体大小（并将font-size设置为li）：

l.navbar {
    font-size: 1px;
}

ul.navbar li {
    font-size: 14px;
}

工作示例：

＆＃13;

＆＃13;

/* navigation bar*/

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #ff9933;
    font-size: 1px;
    text-align: center;
}

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

ul.navbar li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    text-decoration: none;
}

ul.navbar li a:hover {
    background-color: #e67300;
}

＆＃13;

<ul class="navbar">
  <li>
    <a href="#">Link 1</a>
  </li>
  <li>
    <a href="#">Link 2</a>
  </li>
  <li>
    <a href="#">Link 3</a>
  </li>
  <li>
    <a href="#">Link 4</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

仅向所有border-left项添加li。对于最后一个，还要添加border-right

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：https://plnkr.co/edit/8j5It4jlrZRgTMxsArAu?p=preview