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

Question

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

htmlcss

3

我不确定该如何准确地提出这个问题，但我正在使用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;
}

- Eden Chew

1

只需将类(.nav a)的padding-left和padding-right设置为相同的像素空间，如.nav a{padding: 0 20px}，您会发现间距是相等的。 - Dan Triva

非常感谢！这个有效了！ - Eden Chew

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sunil Kumar B M · Accepted Answer

.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像素的间距，无论内容如何。