html - 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在一条线上。

See here for some other techniques and information , and here