Question

我试图模仿这个页面http://learnlayout.com/media-queries.html的例子......在调整为小...后，它应该做两件事... 1.）使LI元素INLINE ....这对我有用 2.）制作资产净值和第一栏......这对我不起作用，见图 enter image description here
这是代码

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vajcia</title>
</head>
<style>
body
{
    margin: 0 0;
}
#container
{
    box-sizing:border-box;
    width: 100%;
    border: 5px solid green;
}
section
{
    border: 2px solid yellow;
    margin-left: 200px;
}
nav{

    background-color: red;
    width:200px;
    box-sizing:border-box;

    /*position: absolute;
    top:0;
    left:0px;*/
    float:left;
}
@media screen and (min-width:600px) {
    nav {
        float: left;
        width: 25%;
    }
    section {
        margin-left: 25%;
    }
}
@media screen and (max-width:599px) {
    nav li {
        display: inline;
    }
}

</style>
<body>
    <div id="container">
        <nav>
            <ul>
                <li>Home</li>
                <li>Taco</li>
                <li>Hours</li>
                <li>Contact</li>
                <li>About</li>
                <li>Hovno</li>
            </ul>
        </nav>      
        <section>
            The margin-left style for sections makes sure there is room for the nav. Otherwise the absolute and static elements would overlap
        </section>
        <section>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
        </section>
        <section>
            Notice what happens when you resize your browser. It works nicely!
        </section>
    </div>

    </body>
    </html>

Answer 1

如果你想要导航一列（红色？），那么你需要删除它的浮动和宽度。

@media screen and (max-width:599px) {
    nav li {
        display: inline;
    }
    nav {
        float: none;
        width: auto;
    }
}

Answer 2

你会想做这样的事情：

http://jsfiddle.net/wFtJ4/

body {
    margin: 0 0;
    margin-bottom: 120px;
}
#container {
    box-sizing:border-box;
    width: 100%;
    border: 5px solid green;
}
section {
    border: 2px solid yellow;
    margin-left: 200px;
}
nav {
    background-color: red;
    width:200px;
    box-sizing:border-box;

        /*position: absolute;
    top:0;
    left:0px;*/
    float:left;
}
@media screen and (max-width:599px) {
    nav li  { display: inline; }
    nav     { width: 100%; text-align: center; }
    section { margin-left: 0 !important; }
}

您的CSS有点随意，所以我希望这表明您在使用@media查询时必须覆盖部分设置;）

CSS3媒体无法正常工作

2 个答案: