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

时间:2012-06-23 09:51:34

标签: asp.net

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

    }

2 个答案:

答案 0 :(得分:3)

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

.Menu
{  
  width:100%; 
}

.Menu ul li
{

    width:10%;
}

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

CssClass="Menu"

答案 1 :(得分:0)

我知道回答这个问题已经很晚了但是仍然有人想知道答案。我对这个问题的解决方案很简单,适用于两级菜单:

library(data.table)
setDT(data)[, unlist(lapply(.SD, function(x) list(Sum=sum(x), Mean = mean(x))),
         recursive=FALSE), by = .(year, company), .SDcols = IQ:CashQ]
#    year company     IQ.Sum   IQ.Mean   REVQ.Sum  REVQ.Mean AssetQ.Sum AssetQ.Mean  CashQ.Sum CashQ.Mean
#1: 1984    xray 36.2510271 9.0627568 -16.814705 -4.2036762  -1.218832  -0.3047081 -31.500185  -7.875046
#2: 1985    xray  7.2565640 1.8141410 -11.509279 -2.8773198  -4.900577  -1.2251443  -5.229553  -1.307388
#3: 1984    kilo  0.6851807 0.1712952  -2.022284 -0.5055711  14.593264   3.6483161 -22.693697  -5.673424

请注意, ul.level1 { width:100% !important; } .level1 li { width:10%; } ul.level2 { width:100% !important; } .level2 li { width:100%; } 用于否决菜单生成的内嵌CSS