如何在 DIV 标签中对齐 asp:Menu？答案

【问题标题】：How to align asp:Menu in DIV tag?如何在 DIV 标签中对齐 asp:Menu？
【发布时间】：2010-08-17 09:24:17
【问题描述】：

我的 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 中的拆分视图下按预期工作，但是在 IE 和 FireFox 中，菜单向左对齐。如何解决这个问题？

感谢您的宝贵时间。

【问题讨论】：

将菜单包裹在一个 div 中并让它浮动吧？
谢谢，它有效。为什么不创建一个答案？

标签： asp.net visual-studio-2008 html alignment aspmenu

【解决方案1】：

您可以将菜单包装在 div 标签中并将其设置为向右浮动，但这使得某些 html 标签也可以浮动到它的一侧。

【讨论】：

【解决方案2】：

我已将您的代码复制/粘贴到新的网络表单中。也许这对你有用：（我在菜单周围的 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>

【讨论】：

谢谢 Roger，Joakim 是第一个，所以我会给他答案。

【解决方案3】：

这是一个旧线程，但目前的做法是在菜单本身的“Properties”中，只需放入StaticMenuStyle-CssClass="menu"并使用与上述相同的css样式。

【讨论】：