解决HTML中换行符渲染成空白符问题

//html
<nav class="navbar">
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/spaceships">Spaceships</a></li>
      <li><a href="/planets">Planets</a></li>
      <li><a href="/stars">Stars</a></li>
    </ul>
</nav>

//css
nav {
      display: block;
 }
.navbar ul {
      font-family: 'Avenir Next', Avenir, Corbel,  sans-serif;
      list-style: none;
      padding: 0;
      background-color: #486a8e;
 }
.navbar li {
      text-transform: uppercase;
      display: inline-block;
      text-align: center;
      width: 25%;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background-color: #12459e;
      outline: 1px solid #fff;
 }   
.navbar li a {
      display: block;
      text-decoration: none;
      line-height: 1.75em;
      padding: 1em;
      color: #fff;
 }

上述代码显示效果如下：

HTML源代码中的换行符被渲染成了空白符，再加上每一项25%的宽度，就导致了折行。要消灭这些空白符，可以尝试把所有<li>标签都排一行，但这种要求显示不友好。

解决方案一：把包含元素的font-size设置为0（从而让每个空格的宽度为0），然后在每一项上重新设置大小：

.navbar ul{
  font-size: 0;
}
.navbar li{
  font-size: 1rem;
}

最终效果

解决方案二：使用表格显示属性实现布局：

.navbar ul{
  display: table;
  width: 100%;
  table-layout: fixed;
 }
.navbar li{
  display: table-cell;
}