html - 流体全宽导航栏

Question

我正在设计一个网站，我想要一个导航栏，可以调整到屏幕的大小。
这就是我现在对 html 的看法：

<nav>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
    <a href="#">Item 4</a>
</nav>

和CSS：

nav a {
    text-decoration:none;
    font-size:2em;
    color:#fff;
    width:25%;
    display:block;
    float:left;
    background-color:#000;
    text-align:center;
}

http://jsfiddle.net/GJVqR/
这工作正常，直到屏幕缩小到一定大小，此时我希望菜单项堆叠在一起。
有没有办法在不诉诸 JS 的情况下做到这一点？

编辑：收到一些答案后，我觉得我需要澄清一下：http: //i.stack.imgur.com/9ID5N.png
当屏幕太小时，这就是我要寻找的东西。

Answer 1

设置

min-width

CSS 属性：

nav a {
    min-width: 100px;
    text-decoration:none;
    font-size:2em;
    color:#fff;
    width:25%;
    display:block;
    float:left;
    background-color:#000;
    text-align:center;
}

Answer 2

您可以使用最小宽度而不是宽度，并让它们浮动：http: //jsfiddle.net/GJVqR/2/ http://jsfiddle.net/GJVqR/3/

nav a {
    text-decoration:none;
    font-size:2em;
    color:#fff;
    min-width:25%;
    display:inline-block;
    float:left;
    background-color:#000;
    text-align:center;
}

Answer 3

我找到了使用@media css 的解决方案

@media (max-width:21.5em){
    nav a {
        width:100%
    }
}

http://jsfiddle.net/GJVqR/4/