html - 是否可以在菜单的两侧设置 ASP 菜单项？

Question

我在 Div 中有一个基本的 ASP:Menu。
我在菜单中有四个 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>

我尝试在一个 Div 中制作两个 asp:Menu，CSS 具有“float:right;”
但它只是将第四个菜单项放在下一行的右侧。

<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 类。