1

我有一个使用第三方控件的水平菜单。菜单的宽度是 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>

任何帮助将不胜感激。

4

1 回答 1

0

有一个 jQuery 插件，它可以为您服务。

https://github.com/lukaszklis/AutoScalingMenu

于 2012-08-22T06:07:34.330 回答