用于在div中重现引导导航栏行为的css解决方案

<div id="navbar">
  <!-- 导航栏内容 -->
</div>

#navbar {
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 导航项在水平方向上平均分布 */
  align-items: center; /* 导航项在垂直方向上居中对齐 */
  background-color: #f1f1f1; /* 导航栏背景颜色 */
  padding: 10px; /* 导航栏内边距 */
}

/* 导航项样式 */
#navbar a {
  text-decoration: none; /* 去除链接下划线 */
  color: #333; /* 导航项文字颜色 */
  margin: 0 10px; /* 导航项之间的间距 */
}

/* 当鼠标悬停在导航项上时的样式 */
#navbar a:hover {
  color: #ff0000; /* 鼠标悬停时的文字颜色 */
}