如何设置独特的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/