Question

我在创建的网页上遇到此问题。screenshot

以下是html的代码：

<!DOCTYPE html>

<head>
    <meta charset="UTF-8"/>
    <title>JJ TECH</title>
    <link rel="stylesheet" href="_css/estilo.css"/>
</head>

<body>
    <div id="interface">
        <header id="cabecalho">
            <nav id="menu">
                <h1>Menu Principal</h1>
                <ul>
                    <li><a href="index.html" class="ativo">Home</a></li>
                    <li><a href="info.html">Informações</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </header>

        <p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p>
    </div>
</body>

和css：

@charset＆＃34; UTF-8＆＃34;;

            body{
                font-family: Arial, sans-serif;
                background: #370b44;
            }

            div#interface{
                width: 900px;
                background: #fff;
                margin: -20px auto 0 auto;
                padding: 20px;

            }

            p{
                text-align: justify;
                text-indent: 30px;
            }


            /*CONFIGURAÇÃO DO MENU*/

            nav#menu h1{
                display: none;
            }

            nav#menu ul{
                background-color: rgba(0,0,0,.5);
                overflow: hidden;
                list-style: none;
                display: block;
                font-size: 13pt;
                margin: 0;
                padding: 0;
                position: fixed;
                width: 100%;
                top: 0;
                left: 0;
            }

            nav#menu li{
                float: left;
                /*border-right: 1px solid #555;*/
            }

            nav#menu li:hover:not(.active){
                background: #000;
            }

            a{
                display: block;
                text-decoration: none;
                color: #fff;
                padding: 15px;
            }

            .ativo{
                background: #751891;
            }

如何让我的内容出现在我的菜单之后，而不是在其下？

Answer 1

由于您的导航位置已固定，因此您必须使用填充或边距下推内容。首先将体边距设置为0.然后添加填充顶部：60px;到div #interface。这应该是一个很好的首发。当然，尝试学习块元素，内联元素，浮动元素以及检查它们在布局方面的不同行为。

Answer 2

您需要更新div#interface

的css

 div#interface{
            width: 900px;
            background: #fff;
            margin: 67px auto 0 auto;
            padding-top: 20px;

        }

Answer 3

我希望这可能有所帮助：根据您的要求进行更改。特别是在单独的文件中添加样式您需要随机播放HTML标记并添加固定为<!DOCTYPE html> <html> <body> <form action="/" method="get"> Points: <input type="range" name="points" min="0" max="10"> <input type="submit"> </form> </body> </html>的位置我建议将其宽度更改为div#interface 这是工作代码：

100%

如何解决这个菜单？

3 个答案: