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像素白色（上面的代码）。

Visual example

任何人都可以解释为什么会发生这种情况和/或提供解决方案吗？

非常感谢！

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

相应地调整高度和宽度，

使用divs的丝带麻烦 - 导航菜单

1 个答案: