asp.net - 如何制作 100% 宽度的 ASP.NET 菜单

Question

我正在构建一个 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;
    }

    }

Answer 1

你可以像这样定义一个Css类:

.Menu
{  
  width:100%; 
}

.Menu ul li
{

    width:10%;
}

然后将菜单控件的以下属性设置为aspx中CSS类的名称。

CssClass="Menu"