1

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

我尝试将菜单居中，display: block; margin: 0 auto;但效果不佳。我想我已经没有可能的解决方案了。

期待您的回复，

干杯!

4

3 回答 3

1

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

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

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

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

请注意，除了自动左右之外，ul 上没有其他边距或填充。您还需要使用 clearfix 清除 ul，因为 li 现在是浮动的。

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

于 2013-08-15T14:30:01.493 回答
0

将 padding-left 降低到 6px，在 li 上将 23px 降低到 22，它应该可以解决问题并将其居中。

于 2013-08-15T14:31:31.637 回答
0

由于使用了网络字体，因此存在此问题。display:table在菜单项上使用也对我有用。

但我选择了另一种解决方案：在菜单元素上设置font-family为。empty并重新设置font-familyli 元素，解决了这个问题。

更多信息可以在这里找到：https ://matthewlein.com/articles/inline-block-fix

于 2018-06-07T10:20:59.817 回答