1

问题已经解决了，我现在继续我的网站开发，谢谢。

问题出在我的网站上（我在 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/

4

5 回答 5

3

这是因为你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为浮动元素。

于 2013-09-21T14:56:21.977 回答
2

那是因为你有lias inline-block。

设置这个：

nav > ul {
   font-size:0;
}

nav li {
   font-size:16px;
}

并做了。

于 2013-09-21T14:58:00.303 回答
1

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

于 2013-10-01T19:48:21.883 回答
0

你可以像这样修复它，这是一个FIDDLE

header nav ul li {
  float: left;
  list-style: none;
  line-height: 150px;
  padding: 0 20px;
  border-left: 1px solid #2d2d2d;
}
于 2013-09-21T14:59:25.833 回答
0

使用所有选择器设置填充和边距，然后使用 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/

于 2013-09-21T15:01:00.593 回答