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

Question

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

如下图所示，例如“主页”和“关于我们”选项卡之间的间距与“联系我们”和“参与其中”之间的间距不同。

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;
}

在上面的样式中，宽度属性是固定的。无论内容如何，​​所有列表项都将具有相同的宽度。相反，摆脱宽度并尝试使用填充。例如:

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

无论内容如何，​​这都会在所有列表元素之间提供 10 像素的间距。