如何实现navbar div响应式宽度 自动填充logo旁剩余水平空间

解决方案 #

用Flex弹性布局可以快速实现需求，只需调整少量CSS规则即可，修改后navbar会自动填充logo右侧所有剩余水平空间，窗口大小变化时自动适配宽度： #

修改点说明

• 给父容器.top添加flex布局规则，启用横向弹性排列，自带垂直对齐能力
• 删除原.top div的inline-block相关样式，避免和flex规则冲突
• 给.navbar添加flex: 1属性，自动占满剩余水平空间
• 额外补充flex-shrink: 0避免logo被压缩，修正原代码中无效的font:26写法

修改后完整CSS代码

.logo{
  margin-top: 2px;
  height: 81px;
  max-width: 408px;
  padding-right: 10px;
  flex-shrink: 0;
}
.logo a img{
  width: 100%;
  height: auto;
}
.top{
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.navbar{
  background-color: #3A383B;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:#C29947;
  padding-top: 25px;
  padding-bottom: 25px;
  padding-left: 10px;
  flex: 1;
}
.navbar a{
  text-decoration: none;
  color: #C29947;
  margin-right: 25px;
  font-size: 26px;
  font-weight: bold;
}

内容的提问来源于stack exchange，提问作者user15044840