菜单未拉伸div的整个长度

Question

I have a menu that is not stretching all the way across my div tag like I need it to. 我有一个菜单没有像我需要的那样一直延伸到我的div标签上。 My div has a css class of menu and my div tag has a css class of nav. 我的div有一个菜单的css类，而我的div标签有一个导航的css类。 I'm tried making the menu and the nav set to 100% width, but nothing is correcting the issue. 我尝试将菜单和导航设置为100％宽度，但没有任何方法可以解决此问题。 Please advise on what isn't correct. 请告知不正确的地方。

Thanks in advance! 提前致谢！

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

 z-index:99999;
 width:  100%;

}

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

 }

Here's the HTML 这是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

Use overflow:auto; 使用overflow:auto; . 。 This will make your menu to stretch. 这将使菜单伸展。

For Instance, 例如，

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

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

}

Hope this helps. 希望这可以帮助。

Answer 2

If you're using position: absolute or position: fixed (implied by your use of z-index ), you can set left and right values to ensure the element stretches across the whole viewport: 如果您使用的是position: absolute或position: fixed （通过使用z-index ），则可以设置左右值以确保元素在整个视口中伸展：

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

This has the added advantage of letting you set padding on the menu without it affecting the overall width. 这具有使您可以在菜单上设置填充而又不影响整体宽度的另一个优点。

菜单未拉伸div的整个长度

问题描述

2 个解决方案

解决方案1
0 2013-10-31 18:55:59

解决方案2
0 2013-10-31 19:02:03

菜单未拉伸div的整个长度

问题描述

2 个解决方案

解决方案1 0 2013-10-31 18:55:59

解决方案2 0 2013-10-31 19:02:03

解决方案1
0 2013-10-31 18:55:59

解决方案2
0 2013-10-31 19:02:03