ASP.Net 使菜单项占据水平菜单的整个宽度答案

【问题标题】：ASP.Net make menu items occupy full width of Horizontal MenuASP.Net 使菜单项占据水平菜单的整个宽度
【发布时间】：2015-11-01 16:38:27
【问题描述】：

我这里有一个水平菜单栏：

<asp:Menu ID="NavigationMenu" runat="server" Orientation="Horizontal" EnableViewState="false" Width="100%" IncludeStyleBlock="true" StaticMenuItemStyle-BackColor="black" StaticHoverStyle-BackColor="#F26522" StaticSelectedStyle-BackColor="#F26522">
        <Items >
            <asp:MenuItem NavigateUrl="B1TSUser.aspx" Text="B1TS User"></asp:MenuItem>
            <asp:MenuItem NavigateUrl="Client.aspx" Text="Client"></asp:MenuItem>
            <asp:MenuItem NavigateUrl="UserClient.aspx" Text="User Client"></asp:MenuItem>
            <asp:MenuItem NavigateUrl="Project.aspx" Text="Project"></asp:MenuItem>
        </Items>
    </asp:Menu>

它目前包含 4 个项目，我希望这些项目自动占据整个水平菜单栏。如果无论有多少菜单项，我都能让它始终占据所有空间，那将是理想的，但这并不是太重要。

这是我的相关css：

#NavigationMenu {
        font-family: downlinkregular;
        width: 100%;
        background-color: black;
        border-left: 2px solid white;
        border-right: 2px solid white;
    }
    #NavigationMenu a {
        text-align: center;
        display: inline-block;
        width: 200px;
        color: white;
        border-right: 2px solid white;
    }

目前菜单项的宽度是 200 像素，但这只是为了让所有内容即使现在，我希望每个案例的宽度为整个菜单的四分之一。不幸的是，将宽度设为 25% 并不像我想象的那样工作。关于如何实现这一点的任何想法？

【问题讨论】：

标签： html css asp.net menu menuitem

【解决方案1】：

box-sizing:border-box; 你在找什么？这样，您可以在使用百分比宽度时将填充和边框排除在外。

我不记得 asp.net 菜单究竟是如何呈现的，我只是假设它使用的是一个列表。

here's a jsfiddle

请注意，您可能需要使用供应商前缀才能使此属性在某些较旧的浏览器上工作

【讨论】：

不幸的是，这不起作用，我也不完全确定 asp.net 菜单的呈现方式，这就是我在这里有点挣扎的原因。但我需要使用它们来让我的母版页选择的项目正常工作。
将 RenderingMode="List" 添加到菜单控件帮助很重要，这应该防止它被呈现为表格并被呈现为列表。
这也不起作用，我认为它的默认渲染模式无论如何都是列表，但我已经添加了它，它仍然没有改变。