ASP.NET 菜单控件
我想将菜单名称扩展到蓝色边框的末尾,如图所示。 http://img.villagephotos.com/p/2005-10/1086302 /menu.JPG,我应该在css中做什么?我尝试定位和宽度。
CSS
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display:table;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
width: 80%;
position: relative;
}
< asp:Menu ID="NavigationMenu" Font-Bold="true" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
< Items>
< asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
< asp:MenuItem Text="Projects" Value="Projects"
NavigateUrl="~/Projects.aspx">
< asp:MenuItem Text="SEED" Value="SEED" NavigateUrl="~/Seed.aspx">
</asp:MenuItem>
< asp:MenuItem Text="SEMS" Value="SEMS" NavigateUrl="~/SEMS.aspx">
</asp:MenuItem>
< asp:MenuItem Text="IPR" Value="IPR" NavigateUrl="~/IPR.aspx">
</asp:MenuItem>
< asp:MenuItem Text="Beneficiaries" Value="Beneficiaries"
NavigateUrl="~/Beneficiaries.aspx">
</asp:MenuItem>
< asp:MenuItem Text="About Us" Value="About US"
NavigateUrl="~/About.aspx"></asp:MenuItem>
< asp:MenuItem Text="Contacts" Value="Contacts"
NavigateUrl="~/Contacts.aspx">
</asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
I want to expand my menu names to the end of blue border, like on pict.
http://img.villagephotos.com/p/2005-10/1086302/menu.JPG , what should I do in css ? i try with positioning and width.
CSS
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display:table;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
width: 80%;
position: relative;
}
< asp:Menu ID="NavigationMenu" Font-Bold="true" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
< Items>
< asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
< asp:MenuItem Text="Projects" Value="Projects"
NavigateUrl="~/Projects.aspx">
< asp:MenuItem Text="SEED" Value="SEED" NavigateUrl="~/Seed.aspx">
</asp:MenuItem>
< asp:MenuItem Text="SEMS" Value="SEMS" NavigateUrl="~/SEMS.aspx">
</asp:MenuItem>
< asp:MenuItem Text="IPR" Value="IPR" NavigateUrl="~/IPR.aspx">
</asp:MenuItem>
< asp:MenuItem Text="Beneficiaries" Value="Beneficiaries"
NavigateUrl="~/Beneficiaries.aspx">
</asp:MenuItem>
< asp:MenuItem Text="About Us" Value="About US"
NavigateUrl="~/About.aspx"></asp:MenuItem>
< asp:MenuItem Text="Contacts" Value="Contacts"
NavigateUrl="~/Contacts.aspx">
</asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我建议使用
标签和包含列表菜单的
设置宽度。ASP.NET
将为您提供
元素是生成的 ID,因此创建诸如
.home
和.projects
之类的类,并将它们应用到
属性What I would advise is using set widths for the
<li>
tags and the<div>
that has the list menu in.ASP.NET will give your
<li>
elements a generated ID so make classes like.home
and.projects
and apply them to the<asp:MenuItem cssClass="">
attribute