间距在导航菜单

Question

我在我的主导航菜单的小空间：

http://ranchocordovaeventscenter.com/

我似乎无法找到导致它这样做的任何CSS。

任何人都可以帮忙吗？

由于提前，

马特

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

由于您的设置列表中的元素以inline-block的。它在每个元素之间创建空间，就好像它是文本一样（单词之间应该有空格，如果你仔细想想，这是有意义的）。

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

只要确保您重置孩子的字体大小，否则他们会继承这个大小，难以辨认。

Answer 3

我没有看到您正在谈论的空间，但之前发生过类似的事情。

CSS Box Model Puzzle - I must be missing something

的关键是为下面的一段CSS代码：

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

尝试包括这个CSS属性你可能有div容器。

希望这会有所帮助！