笔在这里。
HTML
<header>
<div id="logo-div">
MyLogo
</div>
<nav>
<ul class="nav-list">
<li class="item">LINK #1</li>
<li class="item">LINK #2</li>
<li class="item">LINK #3</li>
<li class="item">LINK #4</li>
<li class="item">LINK #5</li>
</ul>
</nav>
</header>
CSS
header{
display: inline-block;
width: 90%;
}
#logo-div{
margin-right: 50px;
float: left;
font-size: 28px;
color: red;
font-weight: 800;
line-height: 60px;
}
nav{
float: right;
}
.nav-list{
display: flex;
height: 150px;
width: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
align-content: flex-start;
margin: 0%;
padding: 0%;
width: auto;
list-style-type: none;
}
.item{
background-color: #d6315d;
height: 50px;
width: 150px;
margin: 5px;
text-align: center;
line-height: 45px;
font-weight: 600;
}
典型的网站标题内联块显示，标志div在左侧和navbar在右侧。我需要有柔性包装的navbar以适应各种设备宽度，至少直到屏幕宽度=600px，在那里它可以变成一个汉堡包。所以我使导航列表高度为列表项高度的3倍。问题是，如果我将nav块浮动到标题中的右侧，则nav item-list将只在logo-div下包装，而不是在logo-div旁边包装。我可以通过将浮点从导航块中完全移除来解决这个问题。但现在缩放时导航块向左漂移，所以整个页面看起来偏离中心。
有人有什么主意吗？
如果我没有理解错的话，你有一个问题，当屏幕较小时，项目没有对齐。最好的方法是使用display:flex轻松实现对齐。我已经做了一个示例代码，希望它能帮助您解决问题(align-items-center在屏幕大小更改时，将所有项目（包括您的徽标）对齐到行的中心。如果不需要，可以将其删除）
HTML
<header>
<div class="d-flex flex-row align-items-center">
<div class="logo">
MyLogo
</div>
<nav>
<ul class="nav-list">
<li class="item">LINK #1</li>
<li class="item">LINK #2</li>
<li class="item">LINK #3</li>
<li class="item">LINK #4</li>
<li class="item">LINK #5</li>
</ul>
</nav>
</div>
</header>
CSS
.nav-list {
display: flex;
width: auto;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
margin: 0%;
padding: 0%;
list-style-type: none;
}
.item {
background-color: #d6315d;
height: 50px;
width: 150px;
margin: 5px;
text-align: center;
line-height: 45px;
font-weight: 600;
}
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.align-items-center {
align-items: center;
}
.logo {
margin-right: 50px;
font-size: 28px;
color: red;
font-weight: 800;
}
JS小提琴链接:https://jsfidle.net/sj_killshot/7u36m194/
