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 に答える