如何在header中排布logo、站点名、导航与登录按钮

不需要改动现有HTML结构，补全对应CSS样式即可实现需求：

• 实现站点名称紧邻Logo：给包裹Logo和站点名的.wrap_logo容器设置弹性布局，让内部元素横向排列、垂直居中，通过间距参数控制两个元素的间隔
• 实现登录按钮距容器边缘缩进：给Header容器设置统一左右内边距，避免内容贴死视口边缘，也可单独给登录按钮容器加边距微调缩进距离

代码修改参考 #

保留你原有样式，追加以下代码即可：

.wrap_logo {
  display: flex;
  align-items: center;
  gap: 8px; /* 可自定义调整Logo和站点名称的间距 */
}

header {
  /* 原有header属性保持不变，追加以下两个属性 */
  padding: 0 24px; /* 可自定义调整header内容距左右边缘的整体缩进 */
  box-sizing: border-box;
}

/* 如需单独微调登录按钮位置，可追加以下样式，不需要可删除 */
.login_button {
  margin-right: 8px;
}

样式说明 #

• 给设置了width: 100%的header追加box-sizing: border-box，是为了避免内边距把header总宽度撑出视口，导致页面出现横向滚动条
• .wrap_logo里的gap属性专门用来控制弹性布局子元素的间距，比单独给图片或文本加margin更直观易维护
• 所有边距、间距的数值都可以根据设计要求自由修改，不会影响整体布局逻辑

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