Question

好的我有一个asp.net菜单控件，它是从代码隐藏创建的。它工作得很好，但这更多的是用户体验而不是功能。如果我调整我的浏览器大小或者我的分辨率低于其设计的分辨率，则会发生的情况是不适合该行的项目被推到第二行。我想避免这种情况，只是隐藏因分辨率而不适合的物品。我希望这是我的代码：

<asp:Menu ID="navigation" runat="server" Orientation="Horizontal" CssClass="topmenu" MaximumDynamicDisplayLevels="20"  
 IncludeStyleBlock="false">
 <DynamicSelectedStyle />
 <DynamicMenuItemStyle />
 <DynamicHoverStyle  />
 <DynamicMenuStyle   />
 <StaticMenuItemStyle  />
 <StaticSelectedStyle />
 <StaticHoverStyle  />
 </asp:Menu>

CSS

div.topmenu{}
div.topmenu ul
{
  list-style:none; 
  padding:5px 0; 
  margin:0;
  background: #0b2e56;

}
div.topmenu ul li
{
  float:left; 
  padding:10px;
  color: #fff; 
  height:16px; 
  z-index:9999;
  margin:0;

}

div.topmenu ul li a, div.menu ul li a:visited{ color: #fff;  }

div.topmenu ul li a:hover{ color:#fff;  }

div.topmenu ul li a:active{color:#fff;  }

Answer 1

尝试将其包装在另一个div中，例如

<div id="navWrapper">
    <asp:Menu ID="navigation" runat="server" Orientation="Horizontal" CssClass="topmenu" MaximumDynamicDisplayLevels="20"  
     IncludeStyleBlock="false">
     <DynamicSelectedStyle />
     <DynamicMenuItemStyle />
     <DynamicHoverStyle  />
     <DynamicMenuStyle   />
     <StaticMenuItemStyle  />
     <StaticSelectedStyle />
     <StaticHoverStyle  />
     </asp:Menu>
</div>

然后像这样改变css

div.topmenu{}
div.topmenu ul
{
  list-style:none; 
  padding:5px 0; 
  margin:0;
  background: #0b2e56;
  float: left;
  width: 1000px;    
}
div.topmenu ul li
{
  float:left; 
  padding:10px;
  color: #fff; 
  height:16px; 
  z-index:9999;
  margin:0;

}

div.topmenu ul li a, div.menu ul li a:visited{ color: #fff;  }

div.topmenu ul li a:hover{ color:#fff;  }

div.topmenu ul li a:active{color:#fff;  }

#navWrapper{
    width: 100%;
    overflow: hidden;
    float: left;
}

希望这是有道理的。我没能测试但是使用那个理论你应该设置为外部div会缩小并隐藏内容，因为它变小但是ul将在div内保持固定的1000px，所以不会下降因为它闪烁

如果长度超过页面宽度，asp.net菜单控件会隐藏项目

1 个答案: