我有以下代码
header {
width: 100%;
height: 65px;
background: #fff;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: center;
color: #252c3a;
}
#menu {
width: 100%;
display: flex;
margin-left: 28%;
}
#menu div {
width: 100px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
<header>
<div id="logo">
<img src="img/header/logo.png" alt="Logo">
</div>
<div id="menu">
<div>Home</div>
<div>Club-Life</div>
<div>Training</div>
<div>Instructors</div>
<div>Contact</div>
</div>
其他 block 的宽度为 100%,但标题宽度比下面的 block 大。我使用 justify-content: space-between.
最佳答案
移除宽度
& 边距
在头部添加flex-wrap
header {
width: 100%;
height: 65px;
background: #fff;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: center;
color: #252c3a;
flex-wrap:wrap;
}
#menu {
display: flex;
flex-wrap:wrap;
}
关于html - 证明内容 : space-between works incorrect,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59579406/