无法使ASP.NET菜单控件跨越页面的整个宽度

时间:2014-07-01 19:35:33

标签: html css asp.net .net web

我不知道为什么我尝试的无效。我想要的只是asp:菜单跨越页面的整个宽度,asp:MenuItem元素占用了大量的空间。这是代码:

Master1.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Master1.master.cs" Inherits="Master1" %>
<%@ Register Src="~/HeaderMenu.ascx" TagName="HeaderMenu" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Main.css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="main_form" runat="server">
        <div>
            <uc1:HeaderMenu ID="MainMenu" runat="server" />
            <asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server" />
        </div>
    </form>
</body>
</html>

HeaderMenu.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HeaderMenu.ascx.cs" Inherits="MasterPageEx.HeaderMenu" %>
<asp:Menu 
    ID="Menu1"
    runat="server"
    Orientation="Horizontal"
    Width="100%"
    Font-Bold="true">
    <Items>
        <asp:MenuItem
            NavigateUrl="~/Default.aspx"
            Text="Home" />
        <asp:MenuItem
            NavigateUrl="~/About.aspx"
            Text="About" />
        <asp:MenuItem
            Text="Code" />
        <asp:MenuItem
            Text="Links" />
    </Items>
</asp:Menu>

menu.css

.normal {
    position: relative;
    top: 0;
    left: 0;
    width: 150px;
    background-color: #0A3B9F;
    color: white;
    text-align: center;
}
menu {
    background-color:#0A3B9F;
    color:white;
    position: absolute;
    display:block;
    text-align:center;
}
.hover {
    text-align:center;
    position: relative;
    width:150px;
    color:white;
    background-color:blue;
    text-align:center;
}
.Writing {
    position:absolute;
    font-family:Century Gothic, sans-serif ;
    font-size:.8em; 
    color:White;
    width:100%;
}

最后,

的main.css:

body {
    background: midnightblue;
    font-family: 'Segoe UI', sans-serif;
}

0 个答案:

没有答案