ASP.NET菜单强制单行而不换行

Question

我已经扫描了互联网，奇怪的是，到目前为止还没有解决方案。

我有以下菜单：

Site.Master ASP.NET：

<div class="menuBackground">
    <div id="MenuDiv" style="visibility: hidden">
        <asp:Menu ID="SiteMenu" CssClass="menu" IncludeStyleBlock="false" runat="server"
            DataSourceID="NedTreasurySiteMapDataSource" Orientation="Horizontal" OnMenuItemDataBound="SiteMenu_MenuItemDataBound"
            ClientIDMode="Static">
            <StaticItemTemplate>
                <div>
                    <%# Eval("Text") %>
                </div>
            </StaticItemTemplate>
            <DynamicItemTemplate>
                <div>
                    <%# Eval("Text") %></div>
            </DynamicItemTemplate>
        </asp:Menu>
    </div>
</div>

使用这个CSS：

div.menu
{

}

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

div.menu ul li a, div.menu ul li a:visited
{
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
    z-index: 1000;
}

div.menu ul li a:hover
{
    text-decoration: none;
    z-index: 1000;
}

div.menu ul li a:active
{
    text-decoration: none;
    z-index: 1000;
}

问题： 当浏览器调整为更小的尺寸时，菜单会包装，当我不希望它时。 我希望它的行为就像内容被裁剪一样，如overflow: hidden;一样，保留在一行中，如display: inline并充当一个块，保留当前的外观。

○：

为：

我非常确定将display: block;更改为display: inline-block;会有效，但事实并非如此。使用display: inline;将它们放在一行中，但会弄乱它们的大小，因为它不再像块一样。

另外，我尝试添加

div.menu ul li
{
    display: inline-block !important;
    white-space: nowrap !important;
}

这也没有做到这一点。

任何想法男人和女孩？ TIA。

Answer 1

如果你在menudiv上放置一个固定的宽度，它应该可以解决你的问题。

由于

尼古拉斯

Answer 2

将宽度修正为menudiv，试试。