html - 为从切片构建的导航项添加背景颜色

Question

我正在设计一个自定义导航菜单，您可以在当前状态下看到它 here .每个单独的导航项如下所示:

所以基本上每个导航项都“挂”在水平栏上。图像的主要部分由图像的三个切片组成:

左:右:中间:

中间 DIV 的背景应用了 repeat-x，因此它会增长以适应导航项的内容，即文本。

这是我目前为左、右和中间 DIV 使用的 CSS:

.left {
    float: left;
    width: 13px;
    background-image: url(nav/images/nav_01.png);
    background-repeat: no-repeat;
    height:46px;
    margin-left:2%;
}

.middle {
    width:auto;
    float:left;
    background-image: url(nav/images/nav_02.png);
    background-repeat: repeat-x;
    font-size:20px;
    font-family: Typewriter;
    color:#393526;
    height:46px;
    padding-left:1px;
}

.right {
    float: left;
    width: 13px;
    background-image: url(nav/images/nav_03.png);
    background-repeat: no-repeat;
    height:46px;
}

到目前为止一切顺利，但我随后不得不弄清楚如何将连接主水平条的垂直条包含到为导航项构建的图像中，以便它始终居中。我这样做的方法是在中间的 div 中包含一个 div，如下所示:

<li>
<div class="nav_image">
<div class="left"></div>
<div class="middle"><div class="top"></div>home</div>
<div class="right"></div>
</div>
</li>

然后将负边距顶部应用于“顶部”DIV:

.top {
    height:27px;
    background-image: url(nav/images/top.png);
    background-repeat: no-repeat;
    background-position-x: center;
    margin-top:-24px;
}

和 'nav_image' DIV 的正边距顶部:

.nav_image {
    margin-top:27px;
}

我不确定这是否是实现我正在寻找的目标的最佳方式，但它目前有效。

我遇到的问题是为“nav_image”DIV 设置背景颜色。我想为此设置一种颜色，并在悬停时设置另一种颜色。我希望我可以为这个 DIV 添加圆 Angular ，然后为此设置一个背景颜色，它会显示在背景图像后面。

目前，DIV“nav_image”显示的宽度为 1200 像素，高度为 0 像素。我本以为它会继承三个子 DIVS 的总宽度，即左、中和右，但显然这不是正在发生的事情。所以我似乎没有要应用背景颜色的 DIV。

我希望这是清楚的，感谢阅读，我很乐意就此获得任何建议。

尼克。

Answer 1

1) 将这些添加到 css:

ul#list-nav li {
    float:left;
    display:inline;
}

.clear {
    clear:both;
}

2) 添加<div class="clear"></div>在每个 <div class="right"></div> 之后

3) 删除 .left的 margin-left: 2%; (改为将边距添加到 ul#list-nav li)

nav_image现在应该有正确的宽度和高度