如何停止弹性物品从容器中出来

在下面，我有一个指向我的Codepen的链接，该链接向您显示了我网站上标题的格式。我很难理解为什么当浏览器宽度缩短时，导航会脱离线路。我要瞄准的是导航缩短宽度时与标头缩小的NAV。任何帮助都将是感谢的。

https://codepen.io/bulletman123/pen/qmbkdn

<body>
    <div class="headerBar">
        <h2>Tottenham Hotspur</h2>
        <nav>
            <ul>
                <li><a href="index.html">Tickets</a></li>
                <li style="margin-right: 30px"><a href="learnHTML.html">Fixtures & Results</a></li>
                <li><a href="learnCSS.html">News</a></li>
                <li><a href="learnJS.html">About Us</a></li>
                <li style="width: 55px; margin-left: 85px; "><a href="learnJS.html" style="border-left: 0px;">Login</a></li>
                <li style="width: 70px; "><a href="learnJS.html" style="border-left: 2px solid rgb(155, 163, 168);">Register</a></li>
            </ul>
        </nav>
    </div>
  </body>
nav{
    display: inline-block;
}
    nav ul{
        display: flex;
        flex-direction: row;
    }
    nav ul li{
        border: none;
        padding: 5px;
        width: 160px;
    }
    nav ul li a{
    border-left: 2px solid rgb(155, 163, 168);
    color: #102964;;
    padding-right: 0px;
    padding-left: 10px;
    transition: 0.4s;
    }
    .headerBar{
        height: 80px;
        background-color:#d1d1d1;
        border-radius: 12px;
        box-shadow: 7px 6px 50px -5px rgba(0,0,0,0.75);
    }
    .headerBar h2{
        padding: 20px;
        margin: 0px;
        font-size: 30px;
        color: #102964;
        display: inline-flex;
    }

在flex页中，它在您使用PX的地方更好地使用％，PX将使Itens从容器中熄灭。

使用.head.headerbar类作为display: flex，然后从LI的宽度中删除宽度。然后，您要调整宽度并稍微填充。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

浏览文章一次，然后回到您的问题，您会弄清一切。

相关内容

最新更新

热门标签：