inline-block导致换行问题

问题：

// html
<nav>
  <a routerLink="/home">主页</a>
  <a routerLink="/movies">电影</a>
  <a routerLink="/music">音乐</a>
</nav>
// css
nav {
    height: 40px;
    line-height: 40px;
    width: 100%;
}
nav a {
    display: inline-block;
    width: 33.3%;
    height: 39px;;
    text-align: center;
    padding-bottom: 1px;
    text-decoration: none;
}

此时打开页面发现换行了，查看padding和margin均为0，查阅资料可知* inline-block是包含空格、换行符的，所以种种原因会导致inline-block产生间距，即会出现换行。*

解决方法：

1. 不设置display为inline-block,而使用float浮动
2. 设置父元素，即本例中的nav属性 white-space: nowrap;强制不换行
3. 父元素设置font-size: 0;