如果长于页面宽度，asp.net 菜单控件将隐藏项目

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，所以不会下拉当它闪现时