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

Question

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

<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 个项目，我希望这些项目自动占据整个水平菜单栏。如果我能让它始终占据所有 space，无论有多少菜单项，那将是理想的，但这不是太重要。

这是我的相关 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% 并没有像我想象的那样起作用。关于如何实现这一点有什么想法吗？

Answer 1

是box-sizing:border-box;您要找的东西吗？这样您就可以在使用百分比宽度时将填充和边框从等式中去掉。

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

here's a jsfiddle

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

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

ASP.Net make menu items occupy full width of Horizontal Menu

html

css

asp.net

menu

menuitem