inline-block Nav Links не переносится при изменении размера окна браузера - PullRequest
Новая
       11

inline-block Nav Links не переносится при изменении размера окна браузера

0 голосов
/ 18 апреля 2020

При изменении размера окна браузера Firefox или Chrome встроенный блок Nav Links не будет "переноситься" на вторую строку, и т. Д. c.

Демонстрационный код приведен ниже и основан на Использование встроенного блока для создания навигационных ссылок в https://www.w3schools.com/css/css_inline-block.asp

Меню корректно переносится при изменении размера, когда оно вставляется в онлайн-окно W3 Tryit Ditto для JSFiddle

Протестировал его здесь на моем Win10 Pro, работающем под управлением iis, и протестировал его онлайн на linux сервере ... в любом случае меню не будет перенесено, когда я изменю размер окна браузера. (Протестировано с Firefox & Chrome)

Спасибо за любую помощь.

Демонстрационный код ниже. 

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .nav {
      background-image: linear-gradient(black, gary);
      list-style-type: none;
      height: auto;
      text-align: center;
      margin: 0;
      padding: .5%;			/* moves block contents away from inside edges */
    }
    
    .nav li {
      display: inline-block;
      height: auto;
      margin: .5%;			/* seperates block from things outside it */
      font-size: 150%;
      padding: .5%;			/* moves block contents away from inside edges */
      border: 1px solid #b7bdb9;
      background-color: #9bf2b3;
    }
    </style>
    </head>
    <body>
    
    <ul class="nav">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About Us</a></li>
      <li><a href="#clients">Our Clients</a></li>  
      <li><a href="#contact">Contact Us</a></li>
    </ul>
    
    </body>
    </html>
...