加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

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

发布时间:2020-12-16 09:51:29 所属栏目:asp.Net 来源:网络整理
导读:我正在构建一个asp.net网站,我需要一个水平的asp菜单作为全屏宽度,每个10个宽度的10个项目. 请建议一个解决方案,因为当我将菜单宽度设置为100%而li宽度设置为10%时,它不会全宽. 但是,当我将菜单宽度设置为1280(我的分辨率)和li宽度设置为128时,它可以正常
我正在构建一个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;
    }

    }

解决方法

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

.Menu
{  
  width:100%; 
}

.Menu ul li
{

    width:10%;
}

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

CssClass="Menu"

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读