ASP.NET 菜单控件

发布于 2024-11-07 05:12:46 字数 1769 浏览 0 评论 0原文

我想将菜单名称扩展到蓝色边框的末尾,如图所示。 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

带刺的爱情 2024-11-14 05:12:47

我建议使用

  • 标签和包含列表菜单的
    设置宽度。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

    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文