4

我正在构建一个 asp.net 网站，我需要一个水平的 asp 菜单作为全屏宽度，每个项目有 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;
    }

    }
4

2 回答 2

2

您可以像这样定义一个 Css 类：

.Menu
{  
  width:100%; 
}

.Menu ul li
{

    width:10%;
}

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

CssClass="Menu"
于 2012-06-23T09:57:58.120 回答
0

我知道现在回答这个问题已经很晚了，但可能仍然有人想知道答案。我对这个问题的解决方案很简单，适用于两级菜单：

    ul.level1 {
    width:100% !important;

}
    .level1 li {
        width:10%;
    }
ul.level2 {
    width:100% !important;
}
    .level2 li {
        width:100%;
    }

请注意，!important用于否决菜单生成的内联 CSS

于 2016-06-30T06:23:57.500 回答