html - 使用 CSS 的导航菜单

Question

我尝试用 html 和 css2 制作一个简单的水平导航菜单。

有点特别的是，我想要一个漂亮的背景(图像)，并且菜单的左侧和右侧都带有背景图像(圆 Angular ):

(链接 1 | 链接 2 | 链接 3)

如果分隔线也是图像就好了，但目前它们是我的第二要务，因为我已经在为 Angular 落而苦苦挣扎。

我尝试使用 3 或 4 个 div，其中一个是整个栏的容器，其余的分别是左、中和右 div。在最后 3 个 div 中设置背景图像:

div.nav
{
    height:39px;
    line-height:39px;
    padding:0;
    margin:0;
    text-align:center;
    vertical-align:middle;
}

div.navLeft {
    content: 
    background: url('../images/left.png') center left no-repeat;
    float: left;
    width:19px;
}

div.navRight {
    content: 
    background: url('../images/right.png') center right no-repeat;
    float: right;
    width:19px;
}

div.navCenter {
    background-image:url('../images/background.png');
    background-color:transparent;
    background-repeat:repeat-x;
    background-position:center;
    width:100px;
}

和 HTML:

        <div class="nav">
            <div class="navLeft"></div>
            <div class="navCenter">test</div>
            <div class="navRight"></div>
        </div>

但是在浏览器中，这只显示了 navCenter 背景图像，看不到左右图像背景。我添加了“内容:”，因为我认为 DIV 可能需要一些内容，但没有任何改进。

也许这是错误的方法，我应该为菜单使用“ul”和“il”标签，但我不知道应该将每个背景图像的 css 放在哪里。例如，我可以将 left 的背景图像放在“ul”的 css 中吗？但是，由于 ul 已经在使用中，右 Angular 的图像怎么办？还是我必须为此使用“ul:after”？

Answer 1

content:  不是有效的 CSS，无论如何你都不应该需要它，左/右 div 的宽度应该足以给它你需要的宽度，然后添加与中心部分的行高相匹配的高度。

如果你觉得你需要添加一个   它应该在 HTML 中

navRight 也应该在 HTML 中的 navCenter 之前，这样 float 才能正常工作。如果容器 div 是 138px = 100+19+19 那么中心 div 应该正好填充 float 之间的空间，如果你把它变成一个新的 block 格式化上下文，它就会，- overflow : hidden 会那样做..

CSS:

div.nav
{
    height:39px;
    width: 138px;
    line-height:39px;
    text-align:center;
}

div.navLeft {
    background: #0f0;
    float: left;
    width:19px;
    height: 39px
}

div.navRight {
    background: #0f0;
    float: right;
    width:19px;
    height: 39px;
}

div.navCenter {
    background: #f00;
    width:100px;
    overflow: hidden; /* to make new black formatting context if width is used */
}

HTML:

<div class="nav">
  <div class="navLeft"></div>
  <div class="navRight"></div>
  <div class="navCenter">test</div>
</div>

Example fiddle