[英]How can I make asp.net menu of 100% width
我正在构建一个asp.net网站,我需要一个水平的asp菜单作为全屏宽度,每个10个宽度的10个项目。
请建议一个解决方案,因为当我将菜单宽度设置为100%而li
宽度设置为10%时,它不会全宽。
但是,当我将菜单宽度设置为1280(我的分辨率)和li
宽度设置为128时,它可以正常工作。 方法的问题并不是每个人都有相同的分辨率的asp.net菜单的Html代码:
<div>
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableTheming="False" EnableViewState="False"
IncludeStyleBlock="False" Orientation="Horizontal" Width="1280px">
<Items>
<asp:MenuItem Text="HOME" Value="ADD CITY" NavigateUrl="~/Content.aspx"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/addcity.aspx" Text="NEW CITY" Value="ADD CITY">
</asp:MenuItem>
<asp:MenuItem Text="NEW DATA" Value="SUBMIT DATA" NavigateUrl="~/adddata.aspx"></asp:MenuItem>
<asp:MenuItem Text="SHOPING" Value="SHOPING">
</asp:MenuItem>
<asp:MenuItem Text="OFFERS" Value="OFFERS"></asp:MenuItem>
<asp:MenuItem Text="BUSINESS" Value="BUSINESS"></asp:MenuItem>
<asp:MenuItem Text="CLASSIFIED" Value="CLASSIFIED"></asp:MenuItem>
<asp:MenuItem Text="EDUCATION" Value="EDUCATION"></asp:MenuItem>
<asp:MenuItem Text="ISSUES" Value="ISSUES"></asp:MenuItem>
<asp:MenuItem Text="SERVICES" Value="SERVICES"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
我试着让它格式化。 现在请帮忙。
这是我的CSS
{
div.menu
{
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width:100%;
}
div.menu ul
{
margin:0px 0px 0px 0px;
list-style: none;
margin: 0px;
padding: 0px;
min-width:100%;
}
div.menu ul li a
{
background-color:Black;
border: 0px Gray solid;
color: White;
display:table-cell;
padding: 10px 10px;
text-decoration:none;
margin:0px 0px 0px 0px;
}
div.menu li
{
text-align:center;
}
div.menu ul li a:hover
{
background-color: #B5B5B5;
color: Black;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: Gray;
color: Black;
text-decoration: none;
}
div.menu ul li .selected
{
background-color: #646464;
color: Black;
text-decoration: none;
}
}
你可以像这样定义一个Css类:
.Menu
{
width:100%;
}
.Menu ul li
{
width:10%;
}
之后,将菜单控件的以下属性设置为aspx中CSS类的名称。
CssClass="Menu"
我知道回答这个问题已经很晚了,但可能仍有人想知道答案。 我对这个问题的解决方案很简单,适用于两级菜单:
ul.level1 {
width:100% !important;
}
.level1 li {
width:10%;
}
ul.level2 {
width:100% !important;
}
.level2 li {
width:100%;
}
请注意!important
用于否决菜单生成的内联CSS
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.