CSS 菜单背景答案

【问题标题】：CSS menu backgroundCSS 菜单背景
【发布时间】：2014-10-06 14:48:48
【问题描述】：

知道它是什么吗？两个菜单项之间的白色框。（用红色圈出）

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;
}

【问题讨论】：

注释掉你的 li 之间的空白 - 当你使用display-inline-block;时它会显示为一个空格@
Extra Space Between inline-block DIV Elements 的可能重复项

标签： html css

【解决方案1】：

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

有很多方法可以防止这种情况发生——一种是在您的ul 上设置font-size:0;，然后在您的li 上设置font-size:14px;

或者，您可以float:left 您的li 并在您的ul 上设置overflow:hidden

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

See here for some other techniques and information, and here

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

像这样在你的 li 的左边浮动；

#navigation li {
    float: left;
}

【讨论】：

【解决方案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 上设置 float left：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/

【讨论】：