如何在CSS Grid中实现列表项并排显示

你当前的问题是<ul>未设置合适的布局规则，导致<li>默认以块级元素垂直排列。只需给<ul>添加布局属性即可实现横向并排：

修改后的CSS代码 #

.logo {
  display: grid;
  grid-template-columns: auto auto; /* 明确logo区域列布局，让图片和标题并排 */
  align-items: center; /* 垂直居中对齐元素 */
  gap: 10px; /* 图片与标题的间距 */
}

ul {
  text-transform: uppercase;
  list-style: none;
  gap: 20px;
  display: flex; /* 核心设置：让列表项横向排列 */
  align-items: center; /* 垂直居中列表项 */
  padding: 0; /* 移除浏览器默认的ul左内边距 */
}

完整HTML代码（无需修改） #

<header>
  <div class="logo">
    <img src="image 17.png" alt="My Learning Journal logo">
    <h4>My learning journal</h4>
  </div>
  <nav>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

关键修改说明 #

• 给ul添加display: flex：这是实现列表项横向排列最直接的方式，flex布局会自动让子元素<li>在同一行排列
• 移除ul默认内边距：消除浏览器自带的左内边距，避免排版偏移
• 优化.logo的grid布局：用grid-template-columns: auto auto明确列数，配合align-items: center让图片和标题垂直居中，解决原布局的模糊性

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