gpt4 book ai didi

html - 如何阻止 flex 元素离开容器

转载 作者:行者123 更新时间:2023-11-28 02:32:38 26 4
gpt4 key购买 nike

在下面,我有一个指向我的代码笔的链接,它向您展示了我网站上标题的格式。我很难理解为什么当浏览器宽度缩短时导航会脱线。我的目标是在宽度缩短时导航与标题一起缩小。任何帮助将不胜感激。

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 将使它脱离容器。

关于html - 如何阻止 flex 元素离开容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49634775/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com