インターネットをスキャンしましたが、奇妙なことに、これまでのところ解決策はありません。
以下のメニューがあります。
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;ように 1 行のままにしたいと考えています。display: inline
良い：
悪い：
display: block;toを変更するとうまくいくと確信していましdisplay: inline-block;たが、うまくいきませんでした。を使用display: inline;すると、それらは 1 行に配置されますが、ブロックとして動作しなくなるため、サイズが台無しになります。
また、追加してみました
div.menu ul li
{
display: inline-block !important;
white-space: nowrap !important;
}
これもうまくいきませんでした。
男と女のアイデアはありますか？ティア。