证明内容:间距不正确 [英] Justify-content: space-between works incorrect
本文介绍了证明内容:间距不正确的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下代码
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:中间的空格.
The width of the other blocks is 100%, but the header width gets bigger than the block below. I use justify-content: space-between.
推荐答案
删除 width
&保证金
在标题上添加 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;
}
这篇关于证明内容:间距不正确的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文