如何制作2个asp:菜单控件渲染在同一行?

时间:2012-11-01 21:49:28

标签: asp.net css

我正在尝试使用现有的第二个菜单控件添加第二个菜单控件,但我无法设法完成。

<div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                    <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                </Items>
            </asp:Menu>
            <asp:Menu ID="SmallMenu" runat="server" CssClass="smallMenu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Settings.aspx" Text="Settings"/>
                    <asp:MenuItem NavigateUrl="~/Admin.aspx" Text="Admin"/>
                </Items>
            </asp:Menu>
        </div>

尝试使用CSS格式化它,但它不起作用。第二个菜单显示在一个新行中。我在这里做错了什么?

div.menu
{
    padding: 4px 0px 4px 8px;
    float:left;
    width:500px;
}

div.smallMenu
{
    padding: 4px 8px 4px 0px;
    width: 300px;
    float: right;
}

编辑:我可以让它们出现在同一行中,如果我把它们放在div中并将第二个浮动到右边但现在右边菜单的一半出现在右侧(外部)页。

2 个答案:

答案 0 :(得分:1)

这听起来像你需要使用浏览器的客户端调试工具进行调试。它听起来就是你所描述的(右侧菜单的分割),好像CSS继承层次结构中的某些东西正在影响该DIV的定位。

您可以尝试的另一件事是进一步嵌套菜单:

<DIV>
  <DIV style="float:left;">
     <DIV style="float:right;">
        <asp:Menu />
     </DIV>
     <asp:Menu />
  </DIV>
</DIV>       

ETA:Here's有类似问题的帖子。前2个答案(截至本文撰写时分别为7分和5分)有一些你可以尝试的东西和一些其他的链接。

答案 1 :(得分:0)

虽然我可能没有很好的理由这样做,但尝试使用css设置两个样式 - 然后用div标签将每个样式括起来。

同时,使用具有适当静态,动态和次级值的单个菜单项,您可以完成相同的操作。