4

私は asp.net Web サイトを構築しています。ここでは、水平 asp メニューを全画面幅にして、それぞれ 10% 幅の 10 項目を表示する必要があります。

メニューの幅を 100% に設定し、幅を 10% に設定すると全幅にならないため、解決策を提案してくださいli。

ただし、メニューの幅を 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

この質問に答えるのが遅いことはわかっていますが、まだ答えを知りたい人がいるかもしれません。この質問に対する私の解決策はシンプルで、2 つのレベルのメニューで機能します。

    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 に答える