Question

我有一个基本的ASP：Div中的菜单我在菜单中有四个asp：menuitem 左边有三个项目，右边有一个吗？

<div class="clear hideSkiplink">
    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
        <Items>
            <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Comment"/>
            <asp:MenuItem NavigateUrl="~/refurb.aspx" Text="Refurb">
            <asp:MenuItem NavigateUrl="~/Account/MembersOnly.aspx" Text="Members Only"/>
        </Items>
    </asp:Menu>
</div>

我尝试制作两个asp：菜单在一个Div中，CSS有＆＃39; float：right;＆＃39;
但它只是将第四个菜单项放在右侧的下一行。

<div class="clear hideSkiplink">
    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
        <Items>
            <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Comment"/>
            <asp:MenuItem NavigateUrl="http://moduletestweb/refurb" Text="Refurb Website">   </asp:MenuItem>
        </Items>
    </asp:Menu>
    <asp:Menu ID="Menu1" runat="server" CssClass="menu2" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
        <Items>
            <asp:MenuItem NavigateUrl="~/Account/MembersOnly.aspx" Text="Members Only"/>
        </Items>
    </asp:Menu>
</div>

/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

div.menu2
{
    padding: 4px 0px 4px 8px;
    float: right;
}

div.menu2 ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 99%;
    float: right;
}

div.menu2 ul li a, div.menu2 ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
    float: right;
}

div.menu2 ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
    float: right;
}

div.menu2 ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
    float: right;
}

我觉得我这样做是错误的有没有人有任何建议？提前谢谢。

Answer 1

将float:left;添加到第一个菜单。

您可以将其作为内联样式添加到第一个菜单的style="float:left"和第二个菜单的style="float:right"，这样您就不必复制CSS来创建menu2类。

是否可以在菜单的两侧安装ASP Menuitems？

1 个答案: