CS课程项目：如何用<ul>替代<table>重构网站导航栏？

你提到的表格布局确实不符合现代HTML语义规范，改用<ul>结合Flexbox可以完美解决你的问题，既保证语义化，又能轻松实现垂直对齐和副标题布局。

重构后的HTML结构 #

<nav>
  <ul class="nav-container">
    <!-- Logo 区域 -->
    <li class="nav-logo">
      <img src="site_logo.png" alt="Site Logo">
    </li>
    <!-- 公司名称区域 -->
    <li class="nav-brand">
      <div class="brand-main">Company</div>
      <div class="brand-sub">Name</div>
    </li>
    <!-- 导航链接区域 -->
    <li class="nav-links">
      <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
        <li><a href="#">Login</a></li>
      </ul>
    </li>
  </ul>
</nav>

对应的CSS样式 #

/* 全局重置列表默认样式 */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 导航容器主样式 */
.nav-container {
  display: flex;
  align-items: center; /* 一键实现所有内容垂直居中 */
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  color: black;
}

/* Logo 区域 */
.nav-logo {
  width: 77px;
  text-align: center;
}

.nav-logo img {
  vertical-align: middle;
}

/* 公司名称区域 */
.nav-brand {
  padding: 10px;
  flex: 1; /* 占据Logo外的剩余可用空间 */
}

.brand-main {
  font-size: 30px;
  font-weight: bold;
  text-align: left;
}

.brand-sub {
  font-size: 18px;
  text-align: left;
}

/* 导航链接区域 */
.nav-links ul {
  display: flex;
  width: 60%; /* 控制链接区域整体宽度，可按需调整 */
}

.nav-links ul li {
  flex: 1; /* 让每个链接均匀分配区域空间 */
  text-align: center;
}

.nav-links a {
  color: black;
  text-decoration: none;
}

关键说明 #

1. 语义化结构：用<nav>包裹导航模块，<ul>表示导航列表，完全符合HTML5语义标准，比表格布局更易维护且利于SEO。
2. 垂直对齐：通过display: flex配合align-items: center，轻松实现导航栏内所有元素的垂直居中，替代表格的vertical-align属性。
3. 副标题布局：在.nav-brand对应的<li>中嵌套两个<div>，分别存放主标题和副标题，完美解决你之前无法在同一<li>内放置副标题的问题。
4. 灵活适配：Flexbox的flex属性可以让各区域自动分配空间，比表格的固定宽度更适配不同屏幕尺寸。

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