0

我的菜单没有像我需要的那样一直延伸到我的 div 标签。我的 div 有一个 css 类的菜单，我的 div 标签有一个 css 类的导航。我尝试将菜单和导航设置为 100% 宽度，但没有解决问题。请告知不正确的地方。

提前致谢！

menu
{
/* padding: 4px 0px 4px;*/

 z-index:99999;
 width:  100%;

}

.nav
{
 width: 90%;
 margin: 20px auto 0px auto;

 }

这是HTML

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-    strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head id="Head1" runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" runat="server">
<div class="nav">
    <div class="header">
        <div class="title">
            <h1>
                              <asp:ImageButton ID="ImageButton1" runat="server" 
                                  />
                              </h1>
        </div>
        <div class="loginDisplay">


            <asp:ImageButton ID="ImageButton2" runat="server" 
                />

        </div>
        <div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
                Orientation="Horizontal" IncludeStyleBlock="False">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Test" 
                        Target="New Window">
                          </asp:MenuItem>
                    <asp:MenuItem NavigateUrl="~/About.aspx" Text="Test 2">

                    </asp:MenuItem>

                    </asp:MenuItem>
                </Items>
            </asp:Menu>
        </div>
    </div>
    <div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>
    <div class="clear">


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



</div>
</form>
</body>
</html>
4

2 回答 2

0

使用overflow:auto;. 这将使您的菜单伸展。

例如，

menu
{
/* padding: 4px 0px 4px;*/

 z-index:99999;
 width:  100%;
 overflow:auto;

}

希望这可以帮助。

于 2013-10-31T18:55:59.620 回答
0

如果您使用position: absoluteor position: fixed（通过使用 来暗示z-index），您可以设置 left 和 right 值以确保元素在整个视口中延伸：

.menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

这有一个额外的优势，可以让您在菜单上设置填充，而不会影响整体宽度。

于 2013-10-31T19:02:03.647 回答