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个项目，我希望这些项目自动占据整个水平菜单栏。如果我可以让它总是占据所有空间，无论有多少菜单项都是理想的，但这并不太重要。

这是我的相关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;
    }

目前菜单项的宽度为200px，但这只是为了使现在的一切，我希望每个案例的宽度为整个菜单的四分之一。不幸的是，宽度为25％并不像我想象的那样有效。关于如何实现这一点的任何想法？

Answer 1

是box-sizing:border-box;您要找的是什么？通过这种方式，您可以在使用百分比宽度时将填充和边界排除在等式之外。

在我的脑海中，我不记得asp.net菜单是如何呈现的，我只是假设它正在使用列表。

here's a jsfiddle

请注意，您可能需要使用供应商前缀才能使此属性适用于某些旧版浏览器

ASP.Net使菜单项占据水平菜单的全宽

1 个答案: