css - 使用 div 的功能区问题 - 导航菜单

Question

我正在使用这个 HTML：

<div id="navleft"></div>
<nav id="nav">
</nav>
<div id="navright"></div>

这个CSS：

#navleft {
background:url('./images/navleft.png');
height:48px;
width:11px;
float:left;
position:absolute;
margin-left:-13px;
}

#navright {
background:url('./images/navright.png');
height:48px;
width:11px;
float:right;
margin-right:-13px;
}

#nav {
background:url('./images/navbg.png') repeat-x;
height:48px;
width:100%;
float:left;
position:relative;
}

问题是左/右图像不会附加到主功能区。

我试过弄乱位置、显示和边距，但最接近我的目标的是它们之间的 1 个白色像素（上面的代码）。

视觉示例

谁能解释为什么会发生这种情况和/或提供解决方案？

非常感激！

Answer 1

尝试这个

jsFiddle

   #navleft {
background:url('http://placehold.it/48x48') ;
float:left;
height:48px;
width:48px;
}

#navright {
background:url('http://placehold.it/48x48') ;
height:48px;
float:left;
width:48px;
}

#nav {
background:url('http://placehold.it/75x48') repeat-x;
height:48px;
width:70%;
float:left;
}

相应地调整高度和宽度，