最大化浏览器窗口时菜单对齐不正确 [英] Menu alignment is not proper when maximizing the browser window

问题描述

大家好



我的母版页面中有一个菜单控件。当我从小窗口到全屏最大化浏览器时，菜单移动到屏幕左侧。它正在正确对齐鼠标悬停事件。同样地，当我从完整尺寸缩小浏览器时，菜单移动到右侧。 ON鼠标Over事件它再次正确对齐...这在IE 6和7中都会发生。我没有在以后的版本中检查它。但是这里的大多数系统都有IE 7

我使用的框架是.Net4.0。



请帮我一下

 <   table     width   =  100％    cellpadding   =  0    cellspacing   =  0   样式  = 背景颜色：黑色;高度：30px; >  
 & lt;   tr     style   =  background-color：Black;高度：30px; >  
 <   td       style   =  background-color：Black;宽度：100％;高度：30px; >  
 <   div     style   =   height：30px >  
 <   asp：菜单    ID   =  NavigationMenu    runat   =  server    EnableViewState   =  false    RenderingMode   = 默认    CssClass   =  menu    ForeColor   = 白色  
   
                                           IncludeStyleBlock   =  false   方向  = 水平   高度  =  30px    OnMenuItemClick   =  NavigationMenu_MenuItemClick   >  
 <   StaticMenuItemStyle     CssClass   =  menuitem   < span class =code-keyword> /  >  
 <   DynamicMenuItemStyle     CssClass   =  menuitem    /  >  
 <  项目 >  
 <   ASP：MenuIt em     NavigateUrl   = 〜/ Home.aspx   文字 < span class =code-keyword> = 主页   工具提示  = 主页    /  >  
 <   asp：MenuItem     NavigateUrl   = 〜/ CommonUser.aspx   文字  = 创建/编辑用户访问   工具提示  = 提供对用户的访问    /  >  
 <   asp：MenuItem     NavigateUrl   = 〜/ BulkUpload.aspx   文字  = 批量上传   工具提示  = 要批量上传用户    /  >  
 <   asp：MenuItem     NavigateUrl   = 〜/ SearchUser.aspx   文字  = 查看/撤消用户访问权限   工具提示  = 查看现有用户访问权限    /  >  
 
 <   asp：MenuItem    文字  = 管理员    NavigateUrl   =  javascript：void（0）; >  
 <   asp：MenuItem     NavigateUrl   =  javascript：void（0）;   文字  = 用户   工具提示  = 创建/编辑应用程序的用户 >  
 <   asp：MenuItem    文字  = 创建用户 < span class =code-attribute>   NavigateUrl   = 〜/ AdminUser.aspx    /  >  
 <   asp：MenuItem    文字  = 编辑用户    NavigateUrl   = 〜 /EditAdminUser.aspx\"   /  >  
 <   / asp：MenuItem  >  
 <   asp：MenuItem    文字  = 模板    NavigateUrl   =  javascript：void（0）; >  
 <   asp：MenuItem    文本  = 创建模板    /  >  
 <   asp：MenuItem    文本  = 编辑模板    /  >  
 <   / asp：MenuItem  >  
 <   asp：MenuItem     NavigateUrl   = < span class =code-keyword> javascript：void（0）;   文字  = 服务器   工具提示  = 添加/编辑服务器详细信息 >  
 <   asp：MenuItem    文字  = 添加服务器    NavigateUrl   = 〜/ AddServers.aspx    /  >  
 <   asp：MenuItem    文本  = 编辑服务器    NavigateUrl   =  〜/ EditServer.aspx    /  > ;  
 <   / asp：MenuItem  >  
 <   asp：MenuItem     NavigateUrl   = 〜/创建ConString.aspx   文本  = 环境密码   工具提示 < span class =code-keyword> = 更改连接字符串的密码   < span class =code-keyword> /  >  
 <   / asp：MenuItem  >  
 
 <   / Items  >  
 <   / asp：菜单 >  
 < ;   / div  >  
 <   / td  >  
 <   / tr  >  
 <   / table  >  

解决方案

使用下面的代码，我认为这可能是狡猾的。

< div 类 =   menu >  
< ul> 
< li>< a href =  ＃> item  1  < /   a  >  < /   li  >  
< li>< a href =  ＃> item  2  < /   a  >  < /   li  >  
< li>< a href =  ＃> item  3  < /  一 >  < /   li  >  
< li>< a href =  ＃> item  4  < /   a  >  < /   li  >  
< li>< a href =  < span class =code-string>＃> item  5  < /   a  >  < /   li  >  
< li>< a href =  <跨度class =code-string>＃> item  6  < /  < span class =code-leadattribute> a  >  < /   li  >  
 < /  < span class =code-leadattribute> ul  >  
 < /   div  >  

CSS对于菜单类：

。 menu  
 {
  width  ：  948px ;  
  height  ：  50px ;  
 保证金 ：  0 auto;  
  background  ： ＃6b3602;  
  border-left  ：  1px solid #fff;  
  border-right  ：  1px solid #fff;  
  border-top  ：  1px solid＃ fff;  
  clear  ：  left;  
  position  ：  static;  
} 
。 menu   ul  {
  display  ： 内联块;  
  margin-top  ：  14px;  
  margin-left  ：  25px;  
  padding  ：  0;  
} 
。 menu   ul   li  {
  display  ：   inline-block;  
  margin  ：  auto 15px ！important ;  
} 
。 menu   ul   li：悬停 {
 可见性 ： 继承;  
 
} 
。菜单  ul   li   a  {
  color  ： ＃a95401;  
  font -size  ：  16px;  
  font-weight  ：  600;  
 字母间距 ：  0.5px;  
  line-height  ：  22px ;  
  text-decoration  ：  none;  
  font-family  ： 'Petit Formal Script'，草书;  
} 
。 menu   ul   li   a：hover  {
 颜色 ： ＃5a2a00;  
  text-decoration  ：  none;  
} 

Hi all

I have a menu control in my mater page. When i maximize the browser from small window to full screen the menu is moving to left of screen . It is getting aligned properly On mouse over event. the same way when i shrink the browser from full size the menu is moving to right side. ON mouse Over event it is again aligning properly... This happens in both IE 6 and 7. I didn''t check it in later versions. but most of the systems here have IE 7
The frame that i use is .Net4.0.

Please help me on the same

<table width="100%" cellpadding="0" cellspacing="0" style="background-color: Black; height: 30px; ">
        <tr style="background-color: Black; height: 30px;">
            <td  style="background-color: Black; width: 100%; height: 30px;">
            <div style="height:30px">
                <asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false" RenderingMode="Default" CssClass="menu" ForeColor="White"

                    IncludeStyleBlock="false" Orientation="Horizontal" Height="30px" OnMenuItemClick="NavigationMenu_MenuItemClick" >
                    <StaticMenuItemStyle CssClass="menuitem" />
                    <DynamicMenuItemStyle CssClass="menuitem" />
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home" ToolTip="Home page" />
                        <asp:MenuItem NavigateUrl="~/CommonUser.aspx" Text="Create / Edit User Access" ToolTip="Provide access to users" />
                        <asp:MenuItem NavigateUrl="~/BulkUpload.aspx" Text="Bulk Upload" ToolTip="To bulk upload users " />
                        <asp:MenuItem NavigateUrl="~/SearchUser.aspx" Text="View / Revoke User Access" ToolTip="View existing users access" />

                        <asp:MenuItem Text="Admin" NavigateUrl="javascript:void(0);">
                            <asp:MenuItem NavigateUrl="javascript:void(0);" Text="User" ToolTip="Create / Edit User for the application">
                                <asp:MenuItem Text="Create User" NavigateUrl="~/AdminUser.aspx" />
                                <asp:MenuItem Text="Edit User" NavigateUrl="~/EditAdminUser.aspx" />
                            </asp:MenuItem>
                            <asp:MenuItem Text="Template" NavigateUrl="javascript:void(0);">
                                <asp:MenuItem Text="Create Template" />
                                <asp:MenuItem Text="Edit Template" />
                            </asp:MenuItem>
                            <asp:MenuItem NavigateUrl="javascript:void(0);" Text="Server" ToolTip="Add / Edit server Details">
                                <asp:MenuItem Text="Add Server" NavigateUrl="~/AddServers.aspx" />
                                <asp:MenuItem Text="Edit Server" NavigateUrl="~/EditServer.aspx" />
                            </asp:MenuItem>
                            <asp:MenuItem NavigateUrl="~/CreateConString.aspx" Text="Environment Password" ToolTip="Change password for connection string" />
                        </asp:MenuItem>

                    </Items>
                </asp:Menu>
                </div>
            </td>
        </tr>
    </table>

解决方案

Use below code,I think this may be the suggession.

<div class="menu">
        <ul>
          <li><a href="#">item 1</a></li>
          <li><a href="#">item 2</a></li>
          <li><a href="#">item 3</a></li>
          <li><a href="#">item 4</a></li>
          <li><a href="#">item 5</a></li>
          <li><a href="#">item 6</a></li>
        </ul>
</div>

CSS For menu class:

.menu
{
    width: 948px;
    height: 50px;
    margin: 0 auto;
    background: #6b3602;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    clear: left;
    position: static;
}
.menu ul {
    display: inline-block;
    margin-top: 14px;
    margin-left: 25px;
    padding: 0;
}
.menu ul li {
    display: inline-block;
    margin: auto 15px !important;
}
.menu ul li:hover {
    visibility: inherit;

}
.menu ul li a {
    color: #a95401;
    font-size: 16px;
    font-weight:600;
    letter-spacing: 0.5px;
    line-height: 22px;
    text-decoration: none;
    font-family: 'Petit Formal Script', cursive;
}
.menu ul li a:hover {
    color: #5a2a00;
    text-decoration: none;
}

这篇关于最大化浏览器窗口时菜单对齐不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！