Question

任何想法是什么？两个菜单项之间的白框。（用红色圈出） enter image description here

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上设置li

或者，您可以删除HTML中的换行符，将所有{{1}}放在一行。

See here for some other techniques and information，and here

Answer 2

内联块显示模式是罪魁祸首。

#navigation li {
    display: inline-block;
    ...
}

相反，您可以这样做，使用上面的代码，最后添加：

#navigation {
    overflow: hidden;
}
#navigation li {
    float: left;
}

Answer 3

像你一样漂浮你的左手;

#navigation li {
    float: left;
}

Answer 4

解决方案是：

在元素上设置浮动。还是......

在父级上设置font-size: 0并重置子级font-size: 1上的字体大小。

因为元素之间的空格会发生。另一个解决方案是使用一些防止空格的语法，如下所示：

<div id="navigation"> <li><a href="#">Item 01</a></li><li> <a href="#">Item 02</a></li><li> <a href="#">Item 03</a></li><li> <a href="#">Item 04</a></li><li> <a href="#">Item 05</a></li> </div>

这是一个例子：

1）在childern上设置浮动：http://jsfiddle.net/27t5ogsj/2/

2）font-size方法（简称css）：http://jsfiddle.net/27t5ogsj/

3）html预格式化方法：http://jsfiddle.net/27t5ogsj/1/

我个人喜欢第二种方法因为我可以用一个简单的文本对齐水平菜单：父母的中心！ http://jsfiddle.net/27t5ogsj/3/

CSS菜单背景

4 个答案: