Question

我有一个菜单没有像我需要的那样一直延伸到我的div标签。我的div有一个css类的菜单，我的div标签有一个css类的nav。我尝试将菜单和导航设置为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>

Answer 1

使用overflow:auto;。这将使您的菜单延长。

对于实例，

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

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

}

希望这有帮助。

Answer 2

如果您使用position: absolute或position: fixed（使用z-index暗示），则可以设置左右值以确保元素在整个视口中延伸：< / p>

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

这样做的另一个好处是可以在菜单上设置填充，而不会影响整体宽度。

菜单没有拉伸div的全长

2 个答案: