Question

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

调整菜单以覆盖菜单宽度

1 个答案: