Question

这是HTML / Razor视图：

 </head>
    <body>
        <header>
            <div class="divHeader">
                Title Here
            </div>
            <div class="divMenu">
               <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </nav>
           </div>
        </header>
        <div class="divBody">
            @RenderBody()
        </div>
        <footer>
            <div class="divFooter">
                All Rights Reserved.
             </div>
        </footer>
    </body>
    </html>

这是CSS：

body
{
    margin: 0 auto;
    max-width: 960px;
    padding: 0px;
    background-color: White;
    text-align: center;
}
header
{
    height: 60px;
    background-color: #C0C0C0;
}
footer
{
    height: 20px;
    background-color: #C0C0C0;
}
div.divHeader
{
    color: #006600;
    font-style: normal;
    font-family: Shruti;
    font-size: 3em;
    font-weight: bold;
}
div.divBody
{
    color: #000000;
    font-style: normal;
    font-family: Georgia;
    font-size: small;
    font-weight: normal;
    text-align: left;
}
div.divFooter
{
    color: #006600;
    font-style: italic;
    font-family: Shruti;
    font-size: 0.75em;
    font-weight: bold;
}
header div.divMenu
{
    position: relative;
}

/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0;
    text-align: left;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-right: 15px;
    }

        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }

        ul#menu li a:hover {
            color: #333;
            text-decoration: none;
        }

Answer 1

它只是视觉效果，渲染是正确的，但你的css样式给divheader提供了一个高于它的高度，除了包含菜单。

为什么div菜单在标题之外呈现？

1 个答案: