如何实现内联双边框并使其在页面缩放时宽度与位置稳定？

你的问题核心是百分比宽度和弹性布局的动态变化导致边框在页面缩放时偏移或改变宽度。咱们直接针对问题点修改代码，让边框的尺寸和位置完全固定：

问题根源 #

1. 侧边栏图标底部边框用了width:85%，缩放时这个百分比会随侧边栏宽度同步变化，导致边框位置和宽度不稳定
2. 顶部栏用了固定百分比宽度95.1%，页面缩放时整体宽度比例变化，边框也会跟着偏移
3. 部分flex布局的自适应属性间接影响了边框的基准容器尺寸

修改方案 #

以下是调整后的完整代码，关键修改点我会在代码后面标注：

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
  font-family: Arial, Helvetica, sans-serif; 
} 
body, html, #app, .Main { 
  height: 100%; 
} 
.Main { 
  display: flex; 
  overflow: hidden; 
} 
/* 侧边栏容器：固定宽度，去掉margin:auto防止垂直位置偏移 */
.side-bar { 
  display: flex; 
  flex-direction: column; 
  width: 80px; /* 用固定width代替flex-basis，确保宽度绝对稳定 */
  align-items: center; 
  height: 98%; 
  margin: 0; /* 去掉auto，避免缩放时垂直位置变动 */
  padding-top: 10px; /* 用padding控制顶部间距，替代margin的不稳定 */
  box-shadow: 2px 0 2px -1.8px rgb(0, 0, 0, 0.4); 
} 
.side-bar .icon { 
  font-size: 40px; 
} 
/* 第一个图标底部边框：用固定px宽度代替百分比 */
.side-bar .icon:first-child { 
  text-align: center; 
  padding-bottom: 20px; 
  width: 68px; /* 80px * 0.85 = 68px，固定宽度确保边框不变 */
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.4); 
} 
.side-bar .icon:not(:first-child) { 
  margin-top: 20px; 
} 
.side-bar .icon:last-child { 
  margin-top: auto; 
} 
.side-bar .active { 
  color: rgba(0, 255, 170, 0.7); 
} 
/* 顶部栏容器：用calc固定宽度，确保和侧边栏对齐 */
.top-bar { 
  display: flex; 
  flex-direction: row; 
  height: 72.4px; 
  align-items: center; /* 新增：让图标垂直居中 */
  width: calc(100% - 80px); /* 总宽度减去侧边栏80px，完美对齐 */
  border-bottom: solid 2px rgba(0, 0, 0, 0.4); 
  padding-left: 20px; /* 用padding控制左侧间距 */
} 
/* 修正顶部栏图标的类名：原来的side-bar类是容器类，图标不需要加这个 */
.top-bar .icon {
  font-size: 40px;
  margin-right: 30px; /* 用margin控制图标间距 */
}

<!DOCTYPE html> 
<html> 
<head> 
  <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/> 
</head> 
<body> 
  <div id="app"> 
    <div class="Main"> 
      <div style="display: flex; width: 100%;"> 
        <div class="side-bar"> 
          <i class="fad fa-home-alt icon"></i> 
          <i class="fad fa-th-large icon"></i> 
          <i class="fad fa-keyboard icon"></i> 
          <i class="fas fa-folder icon active"></i> 
          <i class="fad fa-power-off icon"></i> 
        </div> 
        <div class="top-bar"> 
          <i class="fad fa-home-alt icon"></i> 
          <i class="fad fa-th-large icon"></i> 
          <i class="fad fa-keyboard icon"></i> 
          <i class="fas fa-folder icon active"></i> 
          <i class="fad fa-power-off icon"></i> 
        </div> 
      </div> 
    </div> 
  </div> 
</body> 
</html>

关键修改说明 #

1. 侧边栏固定宽度：把flex-basis:80px改成width:80px，同时去掉margin:auto 0，用padding-top控制顶部间距，确保容器尺寸完全固定
2. 边框固定宽度：把侧边栏图标的width:85%改成固定的68px（和原来的85%比例一致），边框宽度保持1.5px不变
3. 顶部栏宽度自适应但固定基准：用calc(100% - 80px)代替百分比宽度，确保顶部栏始终和侧边栏完美对齐，边框宽度保持2px不变
4. 修正顶部栏图标类名：原来的图标错误继承了side-bar容器类，导致样式冲突，现在单独给顶部栏图标设置样式

这样修改后，无论怎么缩放页面，边框的宽度、位置都会和初始状态完全一致，不会再出现偏移或尺寸变化的问题。

内容的提问来源于stack exchange，提问作者Silent-B