如何阻止弹性项目离开容器答案

【问题标题】：How to stop flex item going out of container如何阻止弹性项目离开容器
【发布时间】：2018-09-13 01:22:40
【问题描述】：

下面我有一个指向我的 codepen 的链接，它显示了我网站上我的标题的格式。我很难理解为什么当浏览器宽度缩短时导航会脱线。我试图瞄准的是当宽度缩短时导航与标题一起缩小。任何帮助将不胜感激。

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

【问题讨论】：

您在li 上设置了固定宽度...尝试删除它。
另外，您似乎将inline-block 与`inline-flex` 混合使用...我一次只使用一种布局方法。
您是否建议使用自动宽度？
你忘了flex-flow: row wrap吗？

标签： html css web flexbox styles

【解决方案1】：

使用 .headerbar 类作为 display: flex 并从 li 中删除宽度。那么你必须稍微调整一下宽度和填充。

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

通读一遍文章，然后回到你的问题，你会弄清楚一切。

【讨论】：

【解决方案2】：

在弹性页面中，最好在使用 px 的地方使用 %，px 会使 itens 脱离容器。

【讨论】：

感谢您的帮助我不知道为什么我不认为这是问题所在。 :)