如何使用ASP.NET Menu控件实现菜单项水平排列？

API 探路者

2026-7-22

方法一：直接设置控件的Orientation属性

ASP.NET Menu控件原生支持水平布局，只需在前台或后台设置Orientation属性为Horizontal即可：

前台ASPX代码修改：

<asp:Menu ID="MainMenu" runat="server" Orientation="Horizontal">
    <!-- 菜单项示例 -->
    <Items>
        <asp:MenuItem Text="Narudžbe" NavigateUrl="~/Narudzbe.aspx"></asp:MenuItem>
        <asp:MenuItem Text="Artikli" NavigateUrl="~/Artikli.aspx"></asp:MenuItem>
        <asp:MenuItem Text="Prijevoznici" NavigateUrl="~/Prijevoznici.aspx"></asp:MenuItem>
        <asp:MenuItem Text="Kupci" NavigateUrl="~/Kupci.aspx"></asp:MenuItem>
        <asp:MenuItem Text="Izvještaji" NavigateUrl="~/Izvjestaji.aspx"></asp:MenuItem>
    </Items>
</asp:Menu>

后台VB.NET代码修改（动态绑定场景）：

' 在Page_Load或绑定方法中设置
MainMenu.Orientation = Orientation.Horizontal

方法二：用CSS强制覆盖默认样式（解决属性失效场景）

如果控件自带样式优先级过高，导致Orientation设置不生效，可通过精准CSS选择器强制调整布局：

/* 针对Menu生成的水平菜单容器 */
.AspNet-Menu-Horizontal {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px; /* 调整菜单项间距 */
    align-items: center;
}

/* 设置菜单项为行内元素 */
.AspNet-Menu-Horizontal .AspNet-Menu-Item {
    display: inline-block;
}

/* 可选：添加菜单项间的|分隔线 */
.AspNet-Menu-Horizontal .AspNet-Menu-Item:not(:last-child)::after {
    content: "|";
    margin-left: 16px;
    color: #666;
}

/* 可选：优化链接样式 */
.AspNet-Menu-Horizontal .AspNet-Menu-Item a {
    text-decoration: none;
    padding: 8px 12px;
    color: #333;
}