Question

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

如何防止这种情况并使浏览器保持菜单的位置，如果有必要，浏览器可以添加水平滚动条，但菜单不应移动。

有人可以帮忙吗？

这是HTML coode：

<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;
      }

Answer 1

以下代码有效。我在Chromium CSS编辑器中自己测试了这个。您只需添加min-width: 1200px或适合您需要的内容，然后将position: fixed更改为position: absolute

#menu {
    height: 86px;
    width: 100%;
    min-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: absolute;
    border: 5px solid #292F33;
    box-shadow: 0px 0px 125px rgba(255, 255, 255, 0.35);
    background-color: #fff;
    color: #292F33;
}

Answer 2

替换此样式完成： -

#cssmenu li{
    width: 12%;
}

Answer 3

您需要更改#menu div的宽度。现在它是width:100%，所以当de body最小化时，＃menu也是。如果您将大小设置为例如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;
}

Answer 4

尝试将其定位为“绝对”而不是“相对”。

为了让它更好，请尝试使用bootstrap。

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

4 个答案: