我不知道为什么我尝试的无效。我想要的只是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;
}