为什么这个导航不完全居中？

Question

出于某种原因，在下面的小提琴中，导航并非完全居中。它不是很多，可能是我的显示器上的3毫米，但它一直在困扰我原因。

http://jsfiddle.net/RMBs6/

以下是我认为可能有问题的代码的片段（但是也要检查小提琴/首先）：

.wrapper {
    margin: 0 auto;
    margin-top: 3em;
    width: 940px;
    text-align: left;
}

.nav {
    padding: 0px;
    text-align: center;
}

Answer 1

使用display: inline-block意味着您的商品彼此不“齐平”。所以有一个背景将真正显示出来。我认为这就是你在<a>上使用-4px边距的原因。

选项1 - 显示：内联块

如果您必须使用display: inline-block，那么我建议删除<a>上的-4px并使用li上的margin: 0 -2px。这将在双方带来它。你可以在这里看到这个工作（请注意，我冒昧地使边框只有1个像素）：

http://jsfiddle.net/RMBs6/6/

选项2 - 浮动

使用float会使列表项彼此相邻。但是，在容器上使用text-align: center不会使其立即居中。您需要定义宽度并使用margin: 0 auto。

选项3 - 显示：表格

这是我最喜欢的选择。这是一种使列表项完全适合容器的方法。您不需要在列表项或子项上定义宽度（px或％）。它们的行为就像桌子中的细胞一样。

http://jsfiddle.net/RMBs6/7/

---

为了更清楚地显示初始问题（据我所知），这是一张精美的照片。

Answer 2

尝试

 .navigation ul 
{
  list-style: none;
  padding: 0;
  width: 90%;
  margin: 0 auto;
}

和

.wrapper {
  margin: 0 auto;
  margin-top: 3em;
  width: 90%;
  text-align: left;
}

Answer 3

它居中。但它基于您为包装器指定的width进行居中。刚刚将940px更改为500px，此处效果很好。

如果您真的想要每次都能运作的东西，可以使用%。

像this：

.wrapper {
  margin: 0 auto;
  margin-top: 3em;
  width: 90%;
  text-align: left;
}

Answer 4

尝试在包装器上放置最大宽度

.wrapper {
            margin: 0 auto;
            margin-top: 3em;
            max-width: 940px;
            text-align: left;
        }

Answer 5

就我所知，它不是以4px为中心：你为每个链接设置为负边距的4px

margin-right：-4px;

摆脱它并使用除显示之外的其他方法：inline-block（例如float）或只删除任何空格和列表项之间的换行符就可以了。