asp.net - 调整菜单以覆盖菜单宽度

Question

我有一个使用第三方控件的水平菜单。菜单的宽度是 100%，我必须安排菜单项，使它们覆盖页面的整个宽度并自动调整，但不知何故，如果屏幕很小，最后一个菜单项会滚动到另一行，如果屏幕大则在同一条线上调整。下面是我的代码。如何制作菜单项，以便它们根据屏幕宽度进行相应调整。

  <div style="background-color:#8e2826; margin-left:15%; margin-right:17%;   color:#8e2826">
       <uc1:NavigationBar ID="NavigationBar" runat="server"  />
  </div>

导航栏的代码是

<MainMenu ID="RadMenu1" runat="server" EnableRoundedCorners="false" EnableShadows="false"
            Height="25px" Width="100%" BackColor="#8e2826" BorderColor="#8e2826" BorderWidth="0" width="100%" >

                <MenuItem Text="Query" BackColor="#8e2826" ForeColor="#cea70b"  Font-Names="Calibri" width="12.5%" >

                <MenuItem>
                <MenuItem Text="Metrics" BackColor="#8e2826" ForeColor="#cea70b"  Font-Names="Calibri" width="12.5%" >

                <MenuItem>
                <MenuItem Text="Reports" BackColor="#8e2826" ForeColor="#cea70b"  Font-Names="Calibri" width="12.5%" >

                <MenuItem>
                <MenuItem Text="Exports" BackColor="#8e2826" ForeColor="#cea70b"  Font-Names="Calibri" width="12.5%" >

                <MenuItem>
                <MenuItem Text="Imports" BackColor="#8e2826" ForeColor="#cea70b"  Font-Names="Calibri" width="12.5%" >

                <MenuItem>
                <MenuItem Text="Web Service" BackColor="#8e2826" ForeColor="#cea70b"  Font-Names="Calibri" width="12.5%" >

                <MenuItem>
                <MenuItem Text="Versions &Fixes" BackColor="#8e2826" ForeColor="#cea70b" Font-Names="Calibri" width="12.5%" >

                <MenuItem>

            </Items>
        </MainMenu>

below is the style sheet

<style type="text/css">

 .style1
 {



    display:inline-block; zoom:1; *display:inline; 


 }
</style>

任何帮助将不胜感激。

Answer 1

有一个 jQuery 插件，可以满足您的需求。

https://github.com/lukaszklis/AutoScalingMenu