Question

每当我放大网页时，导航栏将不显示在屏幕上，当缩小时导航栏可以正常显示，是否存在可以使它在放大/缩小时保持静止的属性，或者是否有其他解决方法？

body, html {
    background-size: cover; 
    font-style: normal;
    font-family: "Lato";
    font-size-adjust: initial;
    font-weight: 400;
    line-height: 1,8em;
    color: #666;
    height: 100%;
    margin:0;
}

nav {
    width: 100%;
    height: 50px;
    background:rgba(0, 0, 0, 0.8);
    min-width: 1200px; 
}
 
nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none; 
}

nav ul li {
    float: left;
    width: 210px; 
    height: 50px; 
    opacity: 0.8; 
    line-height: 50px; 
    text-align: center; 
    font-size: 20px; 
}

nav ul li a {
    text-decoration: none; 
    color: white;
    display: block; 
    z-index: 1; 
}

nav ul li:hover {
    background-color: skyblue; 
    cursor:pointer; 

}

nav ul li ul li {
    display: none; 

}

nav ul li:hover ul li {
    display: block; 
    background: #282e34;
    z-index: 1;
    position: relative;
}

<!DOCTYPE HTML>
<html> 
    <head>
        <link href="style.css" type="text/css" rel="stylesheet"/> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
<body>
 <nav>
  <ul>
   <li><a>Home</a></li>
   <li><a>Hardware</a></li>
   <li><a>Software</a>
      <ul>
        <li><a>System software</a></li>
        <li><a>Application software</a></li>
        
      </ul>
      </li>
    </li>
  <li><a>General Computers</a>
      <ul>
        <li><a>Types of computers</a></li>
        <li><a>History of computers</a></li>
      </ul>
    </li>
  <li><a>Credits</a></li>
  </ul>
</nav>
</body>
</html>

先谢谢了。 ................................................... .......................

Answer 1

可能是因为导航具有min-width:1200px;。如果您的屏幕尺寸小于1200像素，则导航栏将从页面上流血并导致水平滚动。

我还将nav li元素的固定宽度更改为width:20%，以便它们将随nav缩小和增长。

body, html {
    background-size: cover; 
    font-style: normal;
    font-family: "Lato";
    font-size-adjust: initial;
    font-weight: 400;
    line-height: 1,8em;
    color: #666;
    height: 100%;
    margin:0;
}

nav {
    width: 100%;
    height: 50px;
    background:rgba(0, 0, 0, 0.8);
    /* min-width: 1200px; */ 
}
 
nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none; 
}

nav ul li {
    float: left;
    /* width: 210px; */
    width:20%;
    height: 50px; 
    opacity: 0.8; 
    line-height: 50px; 
    text-align: center; 
    font-size: 20px; 
}

nav ul li a {
    text-decoration: none; 
    color: white;
    display: block; 
    z-index: 1; 
}

nav ul li:hover {
    background-color: skyblue; 
    cursor:pointer; 

}

nav ul li ul li {
    display: none; 

}

nav ul li:hover ul li {
    display: block; 
    background: #282e34;
    z-index: 1;
    position: relative;
}

<!DOCTYPE HTML>
<html> 
    <head>
        <link href="style.css" type="text/css" rel="stylesheet"/> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
<body>
 <nav>
  <ul>
   <li><a>Home</a></li>
   <li><a>Hardware</a></li>
   <li><a>Software</a>
      <ul>
        <li><a>System software</a></li>
        <li><a>Application software</a></li>
        
      </ul>
      </li>
    </li>
  <li><a>General Computers</a>
      <ul>
        <li><a>Types of computers</a></li>
        <li><a>History of computers</a></li>
      </ul>
    </li>
  <li><a>Credits</a></li>
  </ul>
</nav>
</body>
</html>

放大（ctrl +，ctrl-）时，导航栏不可用吗？

1 个答案: