Question

我正在构建一个asp.net mvc应用程序。我的顶级菜单结构在我的母版页中。它似乎在不同的屏幕尺寸或不同的屏幕分辨率上呈现不同。这使得菜单结构看起来很糟糕。我希望它在任何时候都是一样的。 以下是我的主页html：

<body>
<div class="page">

    <div id="header">
        <div id="badge" style="float:left; width:20%;"><img src="../../Content/Images/School_Badge.jpg" alt="badge"/></div>

        <div id="title" style="width:80%;">
            <h1>School</h1>
            <h2>
            School Motto: Famba <br />
            English Meaning: Move Forward
            </h2>
        </div>

        <br/><br/><br/><br/>
        <div id="menucontainer">

            <ul id="menu">              
                <li><%: Html.ActionLink("About us", "Index", "Home")%></li>
                <li><%: Html.ActionLink("Admissions", "Admissions", "Home")%></li>
                <li><%: Html.ActionLink("Boarding", "Boarding", "Home")%></li>
                <li><%: Html.ActionLink("Academic", "Academic", "Home")%></li>
                <li><%: Html.ActionLink("Cultural", "Cultural", "Home")%></li>
                <li><%: Html.ActionLink("Sport", "Sport", "Home")%></li>
                <li><%: Html.ActionLink("Staff members", "Staff", "Home")%></li>
                <li><%: Html.ActionLink("Contact us", "ContactUs", "Home")%></li>
            </ul>

        </div>
    </div>

    <div id="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />

        <div id="footer">
        P.O Box 507 School| Phone: +23232 39 265064 | Fax: +232332 39 266043 |
        © Copyright Private School <%: DateTime.Now.Year %> <br /> <br />
        </div>
    </div>
</div>

与此相关的css如下：

.page
{
    width: 72%;
    margin-left: auto;
    margin-right: auto;
}

#header
{
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding-top: 20px;
}

#header h1
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px !important;
}

#header h2
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px !important;
}

#main
{
    position:relative;
    padding: 30px 0px 15px 0px;
    background-color: #fff;
    margin-bottom: 30px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
}

#menucontainer
{
    margin-top:100px;
}

div#title
{
    display:block;
    float:left;
    text-align:left;
}

ul#menu
{
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align:center;
}

ul#menu li
{
    display: inline;
    list-style: none;
}

ul#menu li#greeting
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #e8eef4;
    color: #151B54;
}

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

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

ul#menu li.selected a
{
     background-color: #fff;
     color: #000;
}

第一张图片始终显示正确的显示，第二张图片显示不正确的显示，我想避免的。

Correct display all the time

Incorrect display, what I am trying to avoid

Answer 1

给menucontainer一个特定的宽度

Answer 2

与单位保持一致。如果对pixels等元素使用h1，则填充也使用容器的像素。百分比是相对于浏览器的窗口而且像素是绝对的。

菜单样式，CSS，HTML。避免顶级菜单溢出

2 个答案: