<li> 即使宽度足够，导航栏中的行也会更改？

Question

在一个宽度为 100% 的 ul 元素的导航栏中，有 8 个 li 元素。

每个宽度为 12.5%，因此它们应该占据 100% 的宽度，而不会跨越到下一行。

但在实际操作中，最后一个元素移到下一行。有谁能找出错误吗

注意：ul和body的padding，margin，left 属性设置为0px。

body
{
 margin: 0px;
 padding: 0px;
 font-family:'Helvetica Neue', Helvetica, Arial;
 font-size: 1.5vw;
}
   
#navbar
{
 display: block;
 position: absolute;
 top: 0px;
 width: 100%;
 height: 5%;
 margin: 0px;
 padding: 0px;
 color: white;
 background-color: black;
}
   
#navbar li 
{
 display: inline-block;
 text-align: center;
 width: 12.5%;
 height: 100%;
}

#navbar a 
{
 display: inline-block;
 text-decoration: none;
 color: white;
 width: 100%;
 height: 100%;
}

#navbar a:hover 
{
 background-color: #00aaff;
 color: white;
}

   <ul id="navbar">
 <li><a href="#">Home</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Events</a></li>
 <li><a href="#">Schedule</a></li>
 <li><a href="#">Our Sponsors</a></li>
 <li><a href="#">Team 15</a></li>
 <li><a href="#">Contact us</a></li>
    <li><a style="color: #a18144" href="#">Register Now</a></li>
</ul>

Answer 1

元素之间可能有白色-space。试试这个：

#navbar
{
    font-size: 0;
}

#navbar *
{
    font-size:1.5vw;
}

JSFiddle

<li> 即使宽度足够，导航栏中的行也会更改？

<li> in navbar changes line even if the width is sufficient?

html

css

navbar