如何设置独特的CSS导航菜单样式

Question

我有相当多的CSS知识，但在尝试为我正在开发的网站创建一个独特的导航栏时，我一直很难过。

由于图片价值超过9000字，我把图表放在一起来代表情景。

#container（蓝色）宽1000px，有25px圆角。在容器的顶部是#navbar（绿色），它是#container的全宽，高55px（它匹配#container的顶部，左边和右边，但是我在图像中放大了它你可以看得更清楚）。 #navbar内部是不同的导航按钮（红色）。我希望所有按钮都同样宽（并且始终从一侧延伸到另一侧），并且最左侧/右侧的按钮具有圆角，如祖父母#container。该解决方案需要纯粹而严格的CSS，并且适用于大多数现代浏览器（IE 8及以下版本除外）。

我希望这是一次学习体验，所以如果您发布代码，请提供一些解释。

Answer 1

<强> HTML：

<nav>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</nav>

<div id="container">
</div>

你应该把它变成一个列表......

<强> CSS：

nav {
    display: table; /* see below */
    width: 1000px;
}
#container {
    height: 400px;
    width: 1000px;
    background: blue;
    border-radius: 0 0 25px 25px; /* top-left top-right bottom-right bottom-left */
}
nav span {
    display: table-cell; /* spreads them equally across, no matter how many elements */
    height: 55px;
    background: green;
}
nav span:first-child {
    border-radius: 25px 0 0 0;
}
nav span:last-child {
    border-radius: 0 25px 0 0;
}

这是小提琴：http://jsfiddle.net/GHVSZ/

Answer 2

<强>更新

检查这个小提琴：http://jsfiddle.net/jQpF8/4/

这是你需要的吗？

要设置相等的宽度，您应该使用链接的百分比（导航条的总宽度/链接数）手动设置宽度，或者在动态更改链接数的情况下通过JS设置宽度。

Answer 3

如果你总是只有3个项目，你可以给前2个宽度增加33％，自动增加到第3个 - 所以它们被拉伸到最后，同时添加2个类 - 首先是“第一个项目” menuitem和最后一个“last-item”，所以你可以给它们border-top-left-radius和border-top-right-radius