如何通过CSS实现li元素横向排列为3列并保持在同一行？

嘿，我来帮你搞定这个导航布局的问题！默认情况下<li>是块级元素，所以会自动换行。要让这3个<li>排成同一行的3等列，有两种简单高效的CSS方案，我给你详细拆解：

方法1：使用Flexbox（最常用的现代布局方式） #

Flexbox是处理这类横向布局的绝佳选择，代码简洁且兼容性拉满。只需要给<ul>添加Flex属性，再调整子元素的分配规则即可：

/* 重置ul的默认样式，避免浏览器自带的内外边距和圆点 */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 启用Flex布局 */
}

/* 让每个li平分ul的宽度，形成3等列 */
nav ul li {
  flex: 1;
  text-align: center; /* 让导航文字居中，更美观 */
}

/* 让链接占满整个li区域，提升点击体验 */
nav ul li a {
  display: block;
  padding: 10px 0;
  text-decoration: none; /* 可选，去掉链接下划线 */
}

如果想让li之间有均匀的空白间距，可以给ul加上justify-content: space-between;或者space-around;，根据你的需求调整即可。

方法2：使用CSS Grid（更直观的网格布局） #

如果你需要更规整的网格结构，CSS Grid会是更直接的选择，一行代码就能定义3等列：

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 直接创建3个等宽的列 */
  gap: 15px; /* 可选，给列之间添加固定间距 */
}

nav ul li {
  text-align: center;
}

nav ul li a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
}

这两种方案都不需要修改你现有的HTML结构，只需要把对应的CSS代码加到你的样式表中，就能实现3列同行的导航栏啦～

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