ASP.NET菜單強制單行而不是換行

我掃描了互聯網，奇怪的是，迄今爲止還沒有解決方案。ASP.NET菜單強制單行而不是換行

我有以下菜單：

的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，並充當塊，保留當前外觀。

好： full size, looks ok

壞： small browser, looks bad

我敢肯定，改變display: block;到display: inline-block;會的工作，但沒有。使用display: inline;將它們放在一行中，但會增大它們的大小，因爲它不再像塊一樣。

另外，我嘗試添加

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

其中還沒有做的伎倆。

任何想法男生和女生？ TIA。

來源

2012-07-17 ericosg

你能不能在menudiv上放置一個固定的寬度嘗試使用最小寬度 – 2012-07-17 09:01:52

給你的網站或菜單ul的包裝一個固定。 – SVS 2012-07-17 09:01:57

，當我使用實際的px時，似乎正在做的伎倆，但現在整個菜單得到的高度永久更長......我到了那裏。謝謝！ – ericosg 2012-07-17 10:56:41

如果您在菜單上放置固定寬度，它應該可以解決您的問題。

感謝

尼古拉斯

來源

2012-07-17 13:08:01

修正了menudiv寬度嘗試。

來源

2012-07-17 13:17:03 Inkey

ASP.NET菜單強制單行而不是換行

回答

相關問題