如何将Logo与导航链接置于同一行？附HTML代码示例

核心方案：使用Flexbox布局 #

通过给包含导航和Logo的.header容器设置Flex属性，让内部元素横向排列，同时调整导航列表的样式实现横向布局。

修改后的CSS代码 #

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; /* 可选，让容器居中 */
}

.header {
  display: flex;
  align-items: center; /* 垂直方向居中对齐 */
  justify-content: space-between; /* 导航居左、Logo居右，可按需调整为flex-start等 */
  padding: 1rem; /* 可选，增加内边距避免内容贴边 */
}

.sub-header ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem; /* 控制导航项之间的间距 */
}

.sub-header ul li a {
  text-decoration: none;
  color: #333; /* 自定义链接颜色 */
}

.logo {
  height: 50px; /* 自定义Logo高度，避免尺寸过大 */
}

关键说明 #

1. .header设置display: flex后，内部的nav和img会从默认的块级独占一行，变为横向排列。
2. align-items: center确保导航文字和Logo在垂直方向居中对齐，避免视觉错位。
3. 导航列表ul设置display: flex，让列表项li横向排列，同时去掉默认的列表样式和内外边距，优化视觉效果。
4. 可通过调整justify-content属性改变导航和Logo的位置：比如justify-content: flex-start会让两者都居左，justify-content: center则整体居中。

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