Question

问题已经结束，我现在继续我的网站开发，谢谢。

问题出在我的网站上（我在Chrome中查看）：http://albertorestifo.com/

在导航菜单的元素之间，边框和下一个列表元素之间存在不需要的空间。当您将鼠标悬停在“图库”上时可以看到它。

这里是HTML：

<nav>
            <ul>
                <li class='active'><a href="/">Home</a></li>
                <li><a href="/gallery/">Gallery</a></li>
                <li><a href="/about/">About Me</a></li>
                <li><a href="/contact/">Contact Me</a></li>
            </ul>
        </nav>

这里是CSS：

header nav, header nav ul, header nav ul li, header nav ul li a { height: 100%; } header nav ul li a { display: block; }

header nav ul li {
  display: inline-block;
  line-height: 150px;

  padding: 0 20px;
  border-left: 1px solid #2d2d2d;
}
  header nav ul li:last-child { border-right: 1px solid #2d2d2d; }

  header nav ul li:hover, header nav ul li.active {
    background-color: #0072bc;
  }

  header nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
  }

加上小重置：

ul, ul li { margin: 0; padding: 0; }

我指出我正在使用Normalize.css，所以每个浏览器都应该显示它。

我不知道如何解决这个问题，过去从未发生过这件事！

演示：http://jsfiddle.net/EaAvx/

Answer 1

这是因为您的list-items是inline-block元素。

使用以下任何解决方案：

将HTML更改为：删除标记中的空白区域。

<li class='active'><a href="/">Home</a></li><li><a href="/gallery/">Gallery</a></li><li><a href="/about/">About Me</a></li><li><a href="/contact/">Contact Me</a></li>

或..

<li class='active'><a href="/">Home</a></li><!--
--><li><a href="/gallery/">Gallery</a></li><!--
--><li><a href="/about/">About Me</a></li><!--
--><li><a href="/contact/">Contact Me</a></li>

作为删除空格的替代方法，您始终可以添加负边距：

header nav ul li {
    margin:0px -2px;
}

或将font-size设置为父级的0px ..

注意，你的CSS中仍有1px的差距：

border-left: 1px solid #2d2d2d;

...如果您愿意，可以避免所有这些' hacks '，只需将元素从inline-block更改为浮动元素。

Answer 2

那是因为你有li作为内联块。

设置：

nav > ul {
   font-size:0;
}

nav li {
   font-size:16px;
}

完成了。

Answer 3

您可以删除所有空格，压缩代码，并且效果非常好。甚至跨浏览器。

Answer 4

你可以像这样修复，这里是FIDDLE

header nav ul li {
  float: left;
  list-style: none;
  line-height: 150px;
  padding: 0 20px;
  border-left: 1px solid #2d2d2d;
}

Answer 5

使用所有选择器设置填充和边距然后使用box-sizing

*, *:after, *:before  {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:0;
    margin:0;
}

演示：http://jsfiddle.net/EaAvx/2/

列表元素之间的不受欢迎的空间

5 个答案: