Question

下面我有一个指向我的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;
    }

Answer 1

在flex页面中，最好在使用px的地方使用％，px会使itens从容器中移出。

Answer 2

将.headerbar类用作display: flex并从li中删除宽度。然后你要调整宽度和填充一点。

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

阅读文章，然后再回到你的问题中，你将把所有事情都搞清楚。

如何阻止flex项目从容器中移出

2 个答案: