Question

所以我是html / css的新手，我试图让我的网站做出回应。到目前为止，一切似乎都工作正常减去导航。当浏览器宽度变得非常狭窄时，它就会消失。理想情况下，当浏览器变得如此狭窄时，我希望它直接在标题下对齐。其他一切都调整得很好，虽然我确定此时我有一些不正确的技巧。任何帮助都会很棒，谢谢！

HTML：

 <body>
    <div id="wrapper">
        <div id="header">
         <h1>MY<br/>NAME</h1>
            <div id="nav">
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">SERVICES</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </div>

        </div>
        <div id="content">
            <div id="feature">
                <p>Feature</p>
            </div>
            <div class="article column1">
                <p>Column One</p>
            </div>
            <div class="article column2">
                <p>Column Two</p>
            </div>
            <div class="article column3">
                <p>Column Three</p>
            </div>
        </div>
        <div id="footer">
            <p>Footer Text</p>
        </div>

        </div>
    </body>

CSS：

body {
        max-width: 90%;
        margin:  auto;
        font-size: 100%;
         }



    h1 {
        font-family: 'bikoblack';
        text-transform: uppercase;
        font-size: 3em;
        line-height: 85%;
        color: #2d9471;
        background-color: #1a5642;
        float: left;
        padding: 1em;
        }


    #header {
        overflow: hidden;
        z-index: ""; 
        }

    #nav {
        position: relative;
        top: 11em; 
        }

    li {
        display: inline;
        font-family: 'bikoregular';
        color: #2d9471;
        padding: 4em;
        }



    #feature{
        margin: 1%;
        background-color: #1a5642;
        padding: 2em;
        }


    .column1, .column2, .column3 {

        width: 31.3%;
        float: left;
        margin: 1%;
        background-color: #1a5642;
        }

    .column3 {
        margin-right: 0%;}
        }

    #feature, .article {
        margin-bottom: 1em;
        }

Answer 1

当您缩小窗口时，它最终会隐藏在功能框后面。

你的css中的

#nav有属性position:relative，它会改变导航相对于父div的位置，在这种情况下#header

你想用#nav做什么？当您的视图窗口变小时，您对它的期望是什么？

Answer 2

添加了媒体查询。我希望这是你的想法。

@media (max-width:480px){
    #nav {
        position: relative;
        top: 0em; 
        width:200px;
        }    
}

DEMO：http://jsfiddle.net/Newtt/09qkcbx1/3/

注意：使用不同尺寸的媒体查询，以便在不同的屏幕上按照您的意愿显示元素。

浏览器变小时导航列表消失

2 个答案: