Css 菜单未拉伸整个div长度_Css_Html_Menu

Css 菜单未拉伸整个div长度

css html menu

Css 菜单未拉伸整个div长度,css,html,menu,Css,Html,Menu,我有一个菜单，它并没有像我需要的那样一直延伸到我的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 &l

我有一个菜单，它并没有像我需要的那样一直延伸到我的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>

使用

溢出：自动。这将使你的菜单伸展
例如，
menu
{
/* padding: 4px 0px 4px;*/

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

}

希望这能有所帮助。
如果您使用的是位置：绝对
或位置：固定
（通过使用z-index
）可以设置左右值，以确保元素在整个视口中延伸：
.menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

这样做的另一个好处是，您可以在菜单上设置填充，而不会影响整个宽度。
当我这样做时，它会在菜单上放置一个滚动条，而不是将其一直拉伸到整个div。我对fiddle不太熟悉，所以您希望从中看到什么选项卡/文本？或者提供一个实时链接来查看问题。-@User2815584你可以发布html或链接到fiddle吗？我用html更新了机票