HTML/CSS - 我找不到的幻影边距

Question

我正在我的网站上创建一个菜单栏。我的问题是我的一个菜单项旁边有一个小边距。 (我通过在容器中添加 background-color: black; 来强调这一点。)我正在使用 safari。

CSS:

.testMenuOption{
  width: calc(100%  /3);
  height: 100%;
  float: left;
  margin:auto;
  background-color: white;
  display: table;
}

有人可以告诉我我的问题是什么吗？我已尝试删除文本，但这不是问题所在。

Answer 1

由于您使用 100/3 计算宽度，因此会出现舍入误差，因此宽度不会再次相加 100%。您可以做的是将两个 .menuOptionsWraps 的宽度设置为 33%，一个设置为 34%。

例如这样做:

.menuOptionSelectedWrap {
    float: left;
    width: 33%;
    height: 100%;
    margin: auto;
    margin-right: -4px;
    background-color: #d6eef2;
    display: table;
}
.menuOptionSelectedWrap:last-of-type {
    width: 34%;
}