При увеличении (ctrl +, ctrl-) моя навигационная панель не подходит? - PullRequest
Новая
       12

При увеличении (ctrl +, ctrl-) моя навигационная панель не подходит?

0 голосов
/ 04 января 2019

всякий раз, когда я увеличиваю свою веб-страницу, моя навигационная панель выходит за пределы экрана, когда при уменьшении изображения все в порядке, может быть, есть какой-то атрибут, который заставит его оставаться на месте при уменьшении / уменьшении масштаба, или есть ли другие альтернативы, чтобы это исправить?

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>

Заранее спасибо..........................................................................

1 Ответ

0 голосов
/ 04 января 2019

Может быть потому, что навигация имеет 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>
...