0

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

我有以下菜单：

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;todisplay: inline-block;会起作用，但没有。使用display: inline;将它们放在一行中，但会弄乱它们的大小，因为它不再表现为一个块。

另外，我尝试添加

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

这也没有成功。

男生女生有什么想法吗？TIA。

4

2 回答 2

1

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

谢谢

尼古拉斯

于 2012-07-17T13:08:01.633 回答
0

固定宽度menudiv，试试看。

于 2012-07-17T13:17:03.663 回答