最小化浏览器[CSS,HTML]时,列表导航菜单会四处移动

嗡嗡声

我使用列表在CSS中为主页制作了一个固定的菜单栏。看起来不错,但是当我最小化浏览器时,菜单项向左移动,我不希望它们这样做。

如何防止这种情况并使浏览器保持菜单的原样,如有必要,浏览器可以添加水平滚动条,但菜单不应四处移动。

有人可以帮忙吗?

这是HTML代码:

<div id="menu"> 
    <li style="list-style: none;"> <img src="images/head.png"/><br></li>
    <div id='cssmenu'>      
        <ul>           
            <li><a href='index.html'><span>xxx</span></a></li>  
            <li><a href='index.html'><span>xxx</span></a></li>
            <li><a href='index.html'><span>xxx</span></a></li>
            <li><a href='index.html'><span>xxx</span></a></li>
            <li><a href='index.html'><span>xxx</span></a></li>
            <li><a href='index.html'><span>xxx</span></a></li>  
       </ul>
   </div>       
</div>

这是CSS代码-菜单导航栏:

   #cssmenu
   {
       position: relative;
       margin: 0 auto;
       clear: both; 
   }

   #cssmenu a 
   {
        list-style: none;
        margin: 0;
        padding: 0;
        border: 0;
        line-height: 1.5;    
   }

   #cssmenu li 
   {   
      border: 1px solid transparent;
      padding-top: 7px;
      display: block; 
      width: 160px; 
      float: right; 
      margin: 0 10px;
   }

   #cssmenu ul
   {
      margin: 0 auto;
      padding: 0;
      text-align: center;
      padding-right: 20px;
      margin-bottom: -70px;
          max-height: 80px;
    }

   #cssmenu li a 
   {  
      padding-top: 8px;
      padding-right: 20px;
      padding-left: 20px;
      padding-bottom: 10px; 

      border: 1px solid #dfdfdf;
      text-decoration: none;    
      display: block;

      border-radius: 2px;
      -moz-border-radius: 2px;
          -webkit-border-radius: 2px;
          -khtml-border-radius: 2px;    

       font-size: 17px;
       font-family: Verdana, Tahoma;
      color: #292F33;
     }

     #cssmenu li:hover a 
     {  
         border-bottom: 3px solid #30B0FF;  
         display: block;
         color: #30B0FF;
         clear: both;

        font-size: 17px;
        font-family: Verdana, Tahoma;

        transition-duration: 0.1s;
        transition-delay: 0.03s;
      }

     #menu
     {      
         height: 86px;  
         width: 100%;
         float: center;

         padding-top: 10px;
         padding-right: 20px;
         padding-left: 20px;        
         margin-left: -20px;
         margin-top: -106px;    

         font-family: Verdana, Tahoma;  
         font-size: 15px;
             position: fixed;  

         border: 5px solid #292F33;
             box-shadow: 0px 0px 125px rgba(255, 255, 255, 0.35);
         background-color: #fff;
         color: #292F33;
      }
mbecares

您需要更改#menu div的宽度。现在是width:100%,因此当de body最小化时,#menu div也是如此。如果将尺寸设置为例如1200像素,则当主体最小化时,此尺寸将不会更改。

我已经在您的页面上使用Chrome CSS编辑器对其进行了测试,并且可以正常工作。

所以,

#menu {
height: 86px;
width: 1200px;
float: center;
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
margin-left: -20px;
margin-top: -106px;
font-family: Verdana, Tahoma;
font-size: 15px;
position: fixed;
border: 5px solid #292F33;
box-shadow: 0px 0px 125px rgba(255, 255, 255, 0.35);
background-color: #fff;
color: #292F33;
}

编辑:

还设置了:

body{
min-width:1200px;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

最小化浏览器时的CSS容器

来自分类Dev

使用 Firefox 时颜色点会四处移动

来自分类Dev

最小化浏览器时,Bootstrap导航栏不起作用

来自分类Dev

最小化浏览器时,Bootstrap导航栏不起作用

来自分类Dev

最小化浏览器时通知用户

来自分类Dev

最小化浏览器宽度时,div col移动到上一列的下方

来自分类Dev

调整大小/放大/缩小页面时,div会四处移动

来自分类Dev

如何停止图像在悬停时四处移动?

来自分类Dev

使用StaggeredGridLayoutManager时阻止项目四处移动

来自分类Dev

物体的边缘在旋转时四处移动

来自分类Dev

最小化浏览器窗口时尝试使徽标粘贴

来自分类Dev

最小化浏览器时打开Windows任务栏

来自分类Dev

要在最小化或最大化浏览器窗口时重置RadGrid高度

来自分类Dev

div 内的锚标记在最小化浏览器时显示在 div 外

来自分类Dev

从Karma开始最小化浏览器实例

来自分类Dev

使用JavaScript最小化网络浏览器

来自分类Dev

Twitch视频最小化浏览器后点击

来自分类Dev

如何四处移动JLabes

来自分类Dev

如果我最小化浏览器太小,jQuery移动表单输入字段的大小会奇怪地调整

来自分类Dev

调用Navigator.of(context).push()时,如果最小化Web浏览器,则不会创建新页面

来自分类Dev

当我四处拖动时,所有对象都会移动

来自分类Dev

如何在集群中四处移动碎片

来自分类Dev

Android Toast在屏幕上四处移动

来自分类Dev

Powershell在文件中四处移动行

来自分类Dev

在页面上四处移动画布元素

来自分类Dev

QT图形场景/视图-用鼠标四处移动

来自分类Dev

iOS 7.1中的Safari浏览器全屏,带有最小化UI中继标记

来自分类Dev

批处理文件以最小化启动浏览器并在之后杀死它

来自分类Dev

如何启动以.bat文件最小化的Firefox浏览器?

Related 相关文章

  1. 1

    最小化浏览器时的CSS容器

  2. 2

    使用 Firefox 时颜色点会四处移动

  3. 3

    最小化浏览器时,Bootstrap导航栏不起作用

  4. 4

    最小化浏览器时,Bootstrap导航栏不起作用

  5. 5

    最小化浏览器时通知用户

  6. 6

    最小化浏览器宽度时,div col移动到上一列的下方

  7. 7

    调整大小/放大/缩小页面时,div会四处移动

  8. 8

    如何停止图像在悬停时四处移动?

  9. 9

    使用StaggeredGridLayoutManager时阻止项目四处移动

  10. 10

    物体的边缘在旋转时四处移动

  11. 11

    最小化浏览器窗口时尝试使徽标粘贴

  12. 12

    最小化浏览器时打开Windows任务栏

  13. 13

    要在最小化或最大化浏览器窗口时重置RadGrid高度

  14. 14

    div 内的锚标记在最小化浏览器时显示在 div 外

  15. 15

    从Karma开始最小化浏览器实例

  16. 16

    使用JavaScript最小化网络浏览器

  17. 17

    Twitch视频最小化浏览器后点击

  18. 18

    如何四处移动JLabes

  19. 19

    如果我最小化浏览器太小,jQuery移动表单输入字段的大小会奇怪地调整

  20. 20

    调用Navigator.of(context).push()时,如果最小化Web浏览器,则不会创建新页面

  21. 21

    当我四处拖动时,所有对象都会移动

  22. 22

    如何在集群中四处移动碎片

  23. 23

    Android Toast在屏幕上四处移动

  24. 24

    Powershell在文件中四处移动行

  25. 25

    在页面上四处移动画布元素

  26. 26

    QT图形场景/视图-用鼠标四处移动

  27. 27

    iOS 7.1中的Safari浏览器全屏,带有最小化UI中继标记

  28. 28

    批处理文件以最小化启动浏览器并在之后杀死它

  29. 29

    如何启动以.bat文件最小化的Firefox浏览器?

热门标签

归档