我有以下代码
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>
其他块的宽度为100%,但标头宽度大于下面的块。我使用justify-content:中间的空格。
答案 0 :(得分:1)
删除width
和margin
在标题上添加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;
}
答案 1 :(得分:0)
我们需要做的事情很少:
标题中:
1. Remove width
在#main中:
1. Remove width
2. Remove margin
在#menu div中:
1. Remove everything and just add margin left
演示:https://codepen.io/Bibeva/pen/povddJr
最终代码:
header {
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 {
display: flex;
}
#menu div {
margin: 0 0 0 30px;
}
答案 2 :(得分:-1)
#menu {
display: flex;
}
仅此而已,您可以尝试一下吗?