css - Spacing in Nav Menu

Question

I have a small space in my main navigation menu at:

http://ranchocordovaeventscenter.com/

I can't seem to find any css that is causing it to do this.

Can anyone help?

Thanks in advance,

Matt

Answer 1

<a>问题是元素内的每个锚标记<li>在两侧都有边框......

要解决此问题，请在border-right-width此处添加：

.main-navigation li a {
    border-right-width: 1px solid #F9B233;
}

并删除上述选择器中的以下属性：

 border-width: 1px solid #F9B233;

要删除最后一个元素的右边框，您可以这样做：

.main-navigation li:last-child a
{
    border-right-width: 0;
}

Answer 2

由于您将列表元素设置为内联块。它在每个元素之间创建空格，就好像它是文本一样（单词之间应该有空格，如果您考虑一下，这是有道理的）。

.nav-menu {
  font-size: 0;
}

只要确保你重置了孩子的字体大小，否则他们将继承这个大小并且难以辨认。

Answer 3

我没有看到你所说的空间，但我之前也发生过类似的事情。

CSS 盒子模型拼图 - 我一定错过了什么

关键是下面这段css代码：

box-sizing: border-box; /* needs prefixes for webkit/moz */

尝试为您可能拥有的容器 div 包含此 css 属性。

希望这可以帮助！