导航栏横向显示求助：锚点链接无法inline显示原因排查

嘿，我看了你的代码，问题其实很明确——你的<li>元素默认是块级元素，哪怕你给<a>标签加了inline-block，每个<li>还是会独占一行，所以导航项没法横向排起来。

基于你现有代码的快速修复 #

只需要给<li>也加上display: inline-block（或者inline）就能解决：

ul { 
  list-style-type: none; 
  float: right; 
  margin: 0; /* 去掉ul默认的外边距，排版更清爽 */
  padding: 0; /* 清除默认内边距 */
} 

li {
  display: inline-block; /* 这是关键！让li横向排列 */
  margin-left: 20px; /* 给导航项之间加些间距，看着更舒服 */
}

li a { 
  text-decoration: none; 
  display: inline-block;
  padding: 8px 12px; /* 增大点击区域，提升用户体验 */
} 

h1 { 
  float: left; 
}

更推荐的现代Flex布局方案 #

如果你不想用浮动（浮动容易带来清除浮动的麻烦，你加的group类应该就是用来清浮动的），用Flex布局会更简洁省心：

.main-header {
  display: flex;
  justify-content: space-between; /* 让h1和导航分别靠左右对齐 */
  align-items: center; /* 让内容垂直居中 */
  padding: 0 20px; /* 加些内边距，避免内容贴边 */
}

.main-nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex; /* 让ul里的li横向排列 */
  gap: 20px; /* 直接设置导航项之间的间距，比margin更直观 */
}

.main-nav li a {
  text-decoration: none;
  padding: 8px 12px;
}

h1 {
  margin: 0; /* 去掉h1默认的外边距 */
}

用这个方案的话，你的<header>上的group类其实可以去掉了，不过留着也不会有问题。

总结一下：原来的代码里，<li>默认是display: block，会占满父元素宽度导致换行，只要让<li>变成行内块级元素，或者用Flex布局让它们在一行排列，就能解决导航横向显示的问题啦！

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