我正在尝试创建简单的页眉,在左侧带有 Logo ,在右侧平均分配链接。像这样render from Adobe Xd presenting expected header design .为此,我编写了这段代码(片段缺少图像并且对于这个边距来说有点太窄了):
header {
margin: 0 200px;
height: 75px;
border-bottom: #707070 solid 2px;
display: flex;
flex-direction: row;
}
header .logo {
flex-grow: 2;
flex-basis: 0;
padding: 5px 0;
}
header nav {
flex-grow: 1;
flex-basis: 0;
padding-bottom: 20px;
display: flex;
justify-content: space-between;
}
header nav a {
align-self: flex-end;
}
<header>
<div class="logo">
<a href="home.html">
<img alt="Logo Hufca" src="logo_hufca_zlote.svg" />
</a>
</div>
<nav>
<a href="active.html">Działalność</a>
<a href="unit.html">Jednostki</a>
<a href="docs.html">Dokumenty</a>
<a href="contact.html">Kontakt</a>
</nav>
</header>
在某些情况下,此解决方案在 Chrome 和 Opera 上按预期工作。第一次加载页面后布局正确 (screenshot from Chrome after the first page load) .它还可以充分缩放以调整视口(viewport)大小。然后,点击一些链接后,<nav>
变窄和flex
不再灵活 - 当视口(viewport)不改变大小时 (screenshot from Chrome after the bug occures) .
在 Firefox 和 Edge 上,此解决方案根本不起作用 - 错误一直存在。
You can test this page here.更令人困惑的是,页脚(由 flexbox 制作)在同一页面上正常工作。如何修复我的代码以使标题看起来像预期的那样?
最佳答案
您正在使用静态边距
。最好使用相对的 CSS 规则来实现内容和边框之间的空间。此外,您不需要设置 flex-grow
和 flex-basis
。
但主要问题是 img { height: 100% }
导致 img
元素上升到其完整高度。你必须给 header .logo
一个 max-height
属性。
最好用填充实现导航元素之间的空间。
这是一个可能的解决方案:
header {
margin: 0 auto;
max-width: 90%;
height: 75px;
border-bottom: #707070 solid 2px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
header .logo {
padding: 5px 0;
height: 100%;
max-height: 65px;
}
img {
height: 100%;
}
header nav {
padding-bottom: 20px;
display: flex;
justify-content: space-between;
}
header nav a {
align-self: flex-end;
padding-right: 10px;
}
header nav a:last-child {
padding-right: 0;
}
<header>
<div class="logo">
<a href="home.html">
<img alt="Logo Hufca" src="https://wip.733mdh.pl/user/themes/motyw-hufca/images/logo_hufca_zlote.svg">
</a>
</div>
<nav>
<a href="active.html">Działalność</a>
<a href="unit.html">Jednostki</a>
<a href="docs.html">Dokumenty</a>
<a href="contact.html">Kontakt</a>
</nav>
</header>
关于html - Flexbox 在重新加载后改变大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53168520/