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

您可以使用min-width代替宽度，让它们浮动或不浮动： 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/

流体全宽导航栏

3 个答案: