html - 菜单项在 Chrome/Safari (Mac) 上中断，但在 Firefox 和 Chrome for Win 上不中断

Question

我在构建 following menu 时遇到了一个奇怪的情况. 在 Chrome/Safari (Mac) 上，最后一个菜单项在我添加 padding-left: 7px; 时中断到 <ul>然而，这是我能够显示以 Firefox 和 Chrome for Windows 为中心的菜单的唯一方法。

我尝试使用 display: block; margin: 0 auto; 将菜单居中但这也不起作用。我想我已经用尽了可能的解决方案。

期待您的回复，

干杯!

Answer 1

这可能是因为 Chrome 渲染字体略有不同，并且会有一些像素差异(在这种情况下，屏幕宽度大约有 4 或 5 像素)。

这是我不久前学到的一个小技巧，可以在没有填充的情况下使导航居中，例如:

.site-header .site-nav ul {
  display: table;
  margin: 0 auto; }

.site-header .site-nav li {
  display: block;
  float: left; }

请注意，除了 auto left 和 right 之外，ul 上没有其他边距或填充。 您还需要使用 clearfix 清除 ul，因为 li 现在是 float 的。

或者，如果您不喜欢使用 display:table，您可以对 ul 上的 display:inline-block 做同样的事情，然后设置 text- align:center 在 .site-nav

上