如何使导航栏具有相等的间距？

Question

我不确定如何准确地提出这个问题，但我正在使用带有无序列表的HTML和CSS制作导航栏。

如下图所示，Home和About Us选项卡之间的间距与Contact Us和Get Involved之间的间距不同。

http://imgur.com/a/vIB2u

我的导航栏的CSS代码如下，

.nav {
    width:898px;
}

.nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
    font-family: 'Roboto', sans-serif;
    width: 149.6666666px;
    border-bottom: none;
    height: 106px;
    line-height: 106px;
    font-size: 14px;
    display: inline-block;
    float:left;
    margin: 0 auto;
}

.nav a {
  text-decoration: none;
  color:#000000;
  display: block;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #5c89c7;
  color:#FFFFFF;
}

Answer 1

.nav li {
    font-family: 'Roboto', sans-serif;
    width: 149.6666666px;
    border-bottom: none;
    height: 106px;
    line-height: 106px;
    font-size: 14px;
    display: inline-block;
    float:left;
    margin: 0 auto;
}

在上面的样式中，width属性是固定的。无论其内容如何，​​所有列表项的宽度都相等。相反，摆脱宽度和玩填充。例如：

padding-right: 5px;
padding-left: 5px;

除了内容之外，这将在所有列表元素之间提供10px的间距。