Question

我试图将导航栏放在标题div中，但是它被推出了..所以导航栏出现在页面的中心。你对如何解决这个问题有什么建议吗？谢谢你的帮助！

这是我的 HTML

 <body>
        <div class="fondo">
            <div class="header"> <!--barra de navegacion -->
                <div class="logo">
                    <object data="/Users/MaxRuizTagle/Desktop/guardado por illustrator/been.svg" type="image/svg+xml" alt="logo">
                            <!--[if lte IE 8 ]-->
                        <img src="/Users/MaxRuizTagle/Desktop/guardado por illustrator/images/been.png" alt="Logo"/>
                            <!--[endif]-->
                    </object>
                </div>

                    <div class="container">

                        <div class="sixteen columns">
                            <ul id="nav">
                                <li><a href=""> HOME</a></li>
                                <li><a href="">SPEISEKARTE</a></li>
                                <li><a href="">RESERVIERUNG</a></li>
                                <li><a href="">LOCATION</a></li>
                                <li><a href="">JOBS</a></li>
                                <li><a href="">KONTAKT</a></li>
                                <li><a href="">DJs</a></li>
                            </ul>
                        </div>


                    </div>
                    <div class="footer">
                </div> 
            </div>
        </div>

        </body>

和 CSS

body {
            margin: 0 0 0 0;
            height:1000px;
            font-family: 'Myriad Pro', 'Helvetica Neue', Arial, sans-serif;
        }

        .fondo {
            min-width:100%;
            min-height: 80%;
            background-image: url('../Img/imagenes/fotoportada.jpg');
            background-size: cover;
            position: absolute;
            background-repeat: no-repeat;
            }
        .header {
            min-width: 100%;
            min-height: 100px;
            max-height:100px;
            background-color:rgb(255,255,255);
        }

        .footer {
            background-color:rgb(28,92,144);
            min-width: 100%;
            height:400px;
            position: absolute;
            top: 100%;
        }



        ul#nav {
            margin: 147px 0 0 120px;
            float: left;
        }

        ul#nav li{

            margin-right: 30px;
            font-size: 1.1em;
            display: inline;    
        }


        .logo {
            max-width: 20%;

        }

        .logo object, img {
            min-width:100%;
            float:left;
            position: relative;
            top:-25px;    
        }

Answer 1

您已将margin的{{1}}设置为147px元素。这就是它被推倒的原因。改变它并设置一个合适的值。

ul#nav

<强> JSBin Demo

Answer 2

您正在将元素向下推到带有边距的页面中间，而float:left导致它出现在徽标下方。

试试这个CSS：

    ul#nav {
      margin-left: 20%;
    }

Answer 3

我有同样的问题，结果是一个没有开口标记的额外封闭标签。

内部div被推出父div

3 个答案: