我正在构建一个 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"
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)