为何Flexbox容器内的表格无法随浏览器标签页尺寸自适应？

架构老林

2026-7-10

解决Flexbox自适应导航栏问题

问题根源

给.top_table设置了固定宽度1422px，直接限制了导航栏的自适应能力
错误使用<table>布局，没有发挥Flexbox的弹性特性
外层.flexbox_container设置了flex-direction: column，垂直布局不符合导航栏的横向需求

修改方案

直接用Flexbox重构导航结构，去掉冗余的table标签，利用flex属性实现自适应：

修改后的HTML

<div class="navbar">
  <a href="#ab_me">about me</a>
  <a href="#projects">projects</a>
  <a href="#cntct_me">contact me</a>
</div>

修改后的CSS

/* 导航栏容器，使用flex横向布局 */
.navbar {
  display: flex;
  background-color: #194a7a;
  position: sticky;
  top: 0;
  /* 空间不足时自动换行 */
  flex-wrap: wrap;
  /* 导航项均匀分布 */
  justify-content: space-around;
  align-items: center;
  min-height: 120px;
  width: 100%; /* 占满浏览器窗口宽度 */
}

/* 导航链接样式 */
.navbar a {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  padding: 0 50px;
}

/* 可选：鼠标悬停效果 */
.navbar a:hover {
  color: #ddd;
}