Question

在我的Site.master中，我有一个菜单。

<asp:Menu ID="NavigationMenu" runat="server" ItemWrap="true" Orientation ="Horizontal" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false">
    <Items>
        <asp:MenuItem NavigateUrl="~/_UILayer1/AdminAcctInfo.aspx"  Text="Admin Profile <br/>Info" />
        <asp:MenuItem NavigateUrl="~/_UILayer1/BUsersAcctInfo.aspx" Text="Business Users <br/>Profile Info"/>
        <asp:MenuItem NavigateUrl="~/_UILayer1/FMMPublication.aspx" Text="Publication"/>
        <asp:MenuItem NavigateUrl="~/_UILayer1/ComplaintReportForm.aspx" Text="Complaints"/>
        <asp:MenuItem NavigateUrl="~/_UILayer1/FMMAnalytics1.aspx" Text="Analytics"/>
        <asp:MenuItem NavigateUrl="~/_UILayer1/PollResults.aspx" Text="Sold Items<br/>PollResults"/>
        <asp:MenuItem NavigateUrl="~/_UILayer1/PollResults.aspx" Text="Contact Us<br/>Reports"/>
        <asp:MenuItem NavigateUrl="~/_UILayer1/PollResults.aspx" Text="Approve Business<br/> Users<br/> Scheme 0 members" />
        <asp:MenuItem NavigateUrl="~/_UILayer1/PollResults.aspx" Text="Check Duplicate<br/> Profiles" />
        <asp:MenuItem NavigateUrl="~/_UILayer1/PollResults.aspx" Text="Coupons"/>
    </Items>
</asp:Menu>

有10个菜单项，其中三个菜单项落在下一行。如何调整这些菜单项的宽度或字体，并将所有这些菜单项放在一行

由于太阳

Answer 1

您的父标记中包含以下内容：

ItemWrap="true"

或许将其设为false？

Answer 2

您可以通过CSS更改字体大小以适合一行中的所有菜单项。这将取决于您的屏幕分辨率，但我认为字体大小10px将适合全屏浏览器的所有菜单。这是CSS。在您满意之前，您可以继续更改字体大小。

 div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 0.8px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1em;
    padding: 4px 10px;
    text-decoration: none;
    font-size: 10px;
    white-space:pre-wrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

Site.master菜单项

2 个答案: