如何用纯HTML和CSS实现左中右布局的极简导航栏？

嘿，你的问题核心在于滥用了position: absolute——这个属性会让元素完全脱离正常的文档流，所有加了它的元素都会默认堆叠在左上角，这就是为什么你的文本全部重叠了。而且float和absolute一起用完全是多余的，因为绝对定位的元素根本不会响应float属性。

下面给你两种简单可靠的实现方式，都是纯HTML+CSS，不需要任何框架：

方法一：用Flexbox（推荐，现代且灵活） #

这是目前最简洁的布局方案，代码少且易维护：

HTML结构 #

<div class="mininavbar">
  <span class="nav-item nav-left">Left Text</span>
  <span class="nav-item nav-center">Center Text</span>
  <span class="nav-item nav-right">Right Text</span>
</div>

CSS样式 #

/* 导航栏容器 */
.mininavbar {
  width: 100%;
  display: flex;
  align-items: center; /* 让文本垂直居中，可选 */
  padding: 10px 0; /* 添点内边距，避免文本贴边太挤 */
  box-sizing: border-box; /* 确保padding不会撑宽容器 */
}

/* 左侧文本 */
.nav-left {
  margin-right: auto; /* 自动占据左侧剩余空间，把中间和右侧挤到右边 */
}

/* 右侧文本 */
.nav-right {
  margin-left: auto; /* 自动占据右侧剩余空间，把中间和左侧挤到左边 */
}

/* 严格居中的中间文本 */
.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 让元素自身向左偏移一半宽度，实现完美居中 */
}

如果不需要严格居中（允许中间文本随左右文本长度微调位置），可以简化CSS，去掉中间元素的绝对定位，直接给容器加justify-content: space-between：

.mininavbar {
  width: 100%;
  display: flex;
  justify-content: space-between; /* 直接让三个元素分别贴左、居中、贴右 */
  align-items: center;
  padding: 10px 0;
  box-sizing: border-box;
}

方法二：传统float+绝对定位（兼容旧浏览器） #

如果需要兼容非常老的浏览器（比如IE9及以下），可以用这种方案：

HTML结构 #

<div class="mininavbar">
  <span class="nav-left">Left Text</span>
  <span class="nav-right">Right Text</span>
  <span class="nav-center">Center Text</span>
</div>

CSS样式 #

.mininavbar {
  width: 100%;
  position: relative; /* 让中间元素的绝对定位基于这个容器 */
  padding: 10px 0;
  box-sizing: border-box;
}

.nav-left {
  float: left; /* 左侧文本左飘 */
}

.nav-right {
  float: right; /* 右侧文本右飘 */
}

.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 完美居中 */
}

为什么你的原代码失效？ #

你给所有容器和子元素都加了position: absolute，导致：

1. 所有元素脱离文档流，默认都定位在左上角，自然重叠；
2. float属性在绝对定位的元素上完全无效，你的左右浮动设置根本起不到作用；
3. 嵌套的绝对定位元素会基于最近的已定位父元素（也是绝对定位），布局逻辑完全混乱。

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