CSS菜单背景

Question

任何想法是什么？两个菜单项之间的白框.(用红色圈出)

CSS:

 #navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    line-height: 50px;
}

#navigation a {
    text-decoration: none;
    display: inline-block;
    padding-bottom: 15px;
    color: #383838;
    webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}

#navigation a:hover {
    color: #6A98DD;
}

#navigation li {
    display: inline-block;
    padding-left: 9px;
    padding-right: 10px;
    color: #383838;
    background: #EEE;
    webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.6s;
    webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -ms-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}

#navigation li:hover {
    padding-left: 8px;
    color: #6A98DD;
    display: inline-block;
    background: #EEE;
    border-left: 1px solid #AAA;
}

Answer 1

这是因为您li设置为display: inline-block;- 内联元素被有效地视为文本节点,因此如果每个元素都li在HTML中的换行符中,则将其解释为空格.

有许多的方法,以防止这-一个是设置font-size:0;你的ul,然后font-size:14px;你的li

或者,你可以float:left你的li,并设置overflow:hidden你的ul

或者,您可以删除HTML中的换行符 - 将所有内容li放在一行中.

请参阅此处了解其他一些技术和信息,以及此处