如何用Flexbox实现导航栏链接的完整区域高亮效果

我来帮你一步步重构代码，用Flexbox轻松解决你遇到的问题，不用再手动调整像素啦：

核心思路 #

Flexbox的优势就是能轻松实现垂直居中和弹性布局，我们会把导航栏和链接列表都改成Flex容器，彻底抛弃float和手动计算的padding值。

分步实现 #

1. 基础重置与导航栏容器设置 #

首先，把nav变成Flex容器，这样内部的logo和链接容器可以自动横向排列，同时通过align-items: center让所有元素垂直居中：

html, body { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; /* 统一盒模型，避免padding撑大元素 */
}

nav {
  height: 60px;
  background-color: maroon;
  display: flex; /* 开启Flex布局 */
  justify-content: space-between; /* 让logo居左，链接容器居右 */
  align-items: center; /* 所有子元素垂直居中 */
  padding: 0 1rem; /* 左右留白，替代原来的padding设置 */
}

2. 处理链接列表 #

把链接的ul也改成Flex容器，这样li会自动横向排列，不用再用inline-block：

#links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 让li横向排列 */
  gap: 0; /* 消除li之间的默认间距 */
}

3. 优化链接样式（关键：Hover填满高度） #

让a标签占满整个li的高度，这样hover时的背景色就能填满导航栏的高度，同时用Flex让文字垂直居中：

#links li a {
  display: flex; /* 开启Flex，让文字垂直居中 */
  align-items: center; /* 文字垂直居中 */
  padding: 0 1.5rem; /* 左右留白，按需调整 */
  height: 60px; /* 和导航栏高度一致，hover时填满高度 */
  color: white;
  text-decoration: none;
}

#links li a:hover {
  background-color: blue;
  /* 不用重复写其他样式，继承默认即可 */
}

4. 简化后的HTML结构 #

原来的HTML结构可以保留，这里补全了logo的alt文本让语义更完整：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Portfolio</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <nav id="navbar">
    <div id="logo"><img src="flag.JPG" alt="Site Logo" height="60px" /></div>
    <div id="links">
      <ul>
        <li><a href="#">Welcome</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
  <section id="welcome">Hi!</section>
</body>
</html>

效果说明 #

• 文字始终垂直居中：通过nav的align-items: center和a标签的display: flex + align-items: center双重保障，不管后续调整导航栏高度，文字都能自动居中。
• Hover区域填满导航栏高度：因为a标签的height和导航栏高度完全一致，hover时蓝色背景会完整覆盖对应区域，不用再手动调试padding值。
• 布局更灵活：如果要修改导航栏高度，只需要同步修改nav和a标签的height值，其他元素会自动适配。

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