代码之家 › 专栏 › 技术社区 › Wodzu

如何在DIV标记中对齐asp:menu?

aspmenu alignment html visual-studio-2008 asp.net

Wodzu · 技术社区 · 15 年前

我的CSS如下:

#menu 
{
 width: 1024px;
 height: 25px;
 margin: 0 auto;
 text-align: right;
 background-color: Red;
}

我的ASP页面如下所示(以片段形式):

        <asp:Menu ID="mnuMainMenu" runat="server" BackColor="#F7F6F3" 
            DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Medium" 
            ForeColor="#7C6F57"  
            Orientation="Horizontal" StaticSubMenuIndent="10px" Font-Bold="True">
            <StaticSelectedStyle BackColor="#5D7B9D" />
            <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
            <DynamicMenuStyle BackColor="#F7F6F3" />
            <DynamicSelectedStyle BackColor="#5D7B9D" />
            <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
            <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />
            <Items>
                <asp:MenuItem Text="Projekty" Value="Projekty"></asp:MenuItem>
                <asp:MenuItem Text="Licencje" Value="Licencje"></asp:MenuItem>
                <asp:MenuItem Text="Kontrahenci" Value="Kontrahenci"></asp:MenuItem>
            </Items>
        </asp:Menu>

我想让菜单与DIV标记的右侧对齐。如果我添加更多菜单项,菜单必须自动重新对齐。这在vs 2008的split view下是可以正常工作的,但是在ie和firefox中,菜单是左对齐的。如何解决这个问题?

谢谢你的时间。

3 回复 | 直到 9 年前

Joakim 15 年前

您可以将菜单包装在一个DIV标记中,并将其设置为向右浮动,但是这会使某些HTML标记也可能浮动到它的一侧。

Roger 15 年前

我已将您的代码复制/粘贴到新的Web表单中。也许这对你有用: (我在菜单周围的DIV中添加了一个类,并将其浮动到右侧)

<head runat="server">
<title></title>
<style type="text/css"">
#menu 
{
 width: 1024px;
 height: 25px;
 margin: 0 auto;
 text-align: right;
 background-color: Red;
}

#menuContainer{float: right;}

</style></head>

<body><form id="form1" runat="server">
<div id="menuContainer">

<asp:Menu ID="mnuMainMenu" runat="server"  BackColor="#F7F6F3" 
        DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Medium" 
        ForeColor="#7C6F57"  
        Orientation="Horizontal" StaticSubMenuIndent="10px" Font-Bold="True">
        <StaticSelectedStyle BackColor="#5D7B9D" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
        <DynamicMenuStyle BackColor="#F7F6F3" />
        <DynamicSelectedStyle BackColor="#5D7B9D" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" />

        <Items>
            <asp:MenuItem Text="Projekty" Value="Projekty"></asp:MenuItem>
            <asp:MenuItem Text="Licencje" Value="Licencje"></asp:MenuItem>
            <asp:MenuItem Text="Kontrahenci" Value="Kontrahenci"></asp:MenuItem>
        </Items>
    </asp:Menu>
</div>
</form>

Vlad Z. 12 年前

这是一个旧线程,但当前的方法是 Properties “菜单本身,只需放入 StaticMenuStyle-CssClass="menu" 并使用与上面相同的CSS样式。