如何实现id为logo-holder的h1标签logo与topnav同行左侧布局？

看起来你遇到的核心问题是body设置了display: grid导致float属性失效——在Grid布局容器中，子元素的浮动会被浏览器忽略，所以你加的float: left和display: inline根本起不了作用，才会出现Logo和导航栏上下排列的情况。

下面给你两个简便的解决方案，不需要大改现有代码：

方案1：用Flex容器包裹Logo和导航栏（推荐） #

这种方法最直观，也不会干扰页面其他布局，只需要给Logo和topnav加一个父容器，用Flex实现同行对齐：

第一步：调整HTML结构 #

把你的Logo容器和topnav放到一个新的容器里：

<div class="header-wrapper">
  <div id="logo-holder">
    <h1 id="logo"><a href="#">你的公司Logo</a></h1>
  </div>
  <nav id="topnav">
    <!-- 这里是你的导航链接 -->
  </nav>
</div>

第二步：修改CSS样式 #

body {
  background-color: #ffffff;
  margin: 0px;
  /* 如果页面其他部分不需要Grid布局，可以去掉display:grid；如果需要保留也没关系，不会影响header-wrapper */
  /* display: grid; */
}

/* 核心：用Flex实现同行+垂直居中 */
.header-wrapper {
  display: flex;
  align-items: center; /* 让Logo和导航栏垂直居中对齐 */
  padding: 0 16px; /* 可选：加内边距避免元素贴边 */
}

#logo-holder {
  /* 删掉原来的float和inline，Flex下不需要这些 */
  /* float: left; */
  /* display: inline; */
}

#logo-holder h1#logo a {
  font-size: 22px;
  /* 保留你原来的其他样式，比如颜色、字体等 */
  color: #333;
  text-decoration: none;
}

/* 保留topnav原有样式，比如灰色背景 */
#topnav {
  background-color: #eee;
  padding: 8px 16px;
  /* 如果想让导航栏靠右，可以加margin-left: auto; */
  /* margin-left: auto; */
}

方案2：利用现有Grid布局直接调整 #

如果你不想改HTML结构，可以直接修改body的Grid配置，让Logo和topnav在同一网格行：

body {
  background-color: #ffffff;
  margin: 0px;
  display: grid;
  grid-template-columns: auto 1fr; /* Logo占自适应宽度，topnav占剩余全部空间 */
  align-items: center; /* 垂直居中对齐 */
  padding: 0 16px;
}

#logo-holder {
  /* 删掉无效的float和inline */
  /* float: left; */
  /* display: inline; */
}

#logo-holder h1#logo a {
  font-size: 22px;
  /* 你的原有样式 */
}

#topnav {
  background-color: #eee;
  padding: 8px 16px;
  /* 让导航栏靠右显示 */
  justify-self: end;
}

为什么原来的方法失效？ #

当你给body设置display: grid后，body就变成了Grid容器，它的直接子元素（也就是#logo-holder和topnav）会自动成为Grid项目。而Grid布局中，浮动（float）、清除浮动（clear）和垂直对齐（vertical-align）属性对Grid项目都无效，所以你加的float: left根本不会让元素同行。

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