CSS Flexbox实现导航栏列表项的水平居右与垂直居中

<div class="main-site">
  <nav>
    <ul class="nav-list">
      <li class="nav-items"><a href=""> Item 1</a></li>
      <li class="nav-items"><a href=""> Item 2</a></li>
      <li class="nav-items"><a href=""> Item 3</a></li>
      <li class="nav-items"><a href=""> Item 4</a></li>
    </ul>
  </nav>
</div>

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
}

body {
  margin: 0 10vw; /* 页面左右各留10vw的边距 */
  background-color: #E7E7E7;
}

.main-site {
  background-color: white;
}

.main-body {
  padding-top: 6vh; /* 为固定导航栏留出空间，防止内容被遮挡 */
}

nav {
  display: flex; /* 启用Flexbox布局，使nav成为Flex容器 */
  align-items: center; /* 垂直居中其子元素（如ul.nav-list） */
  justify-content: flex-end; /* 水平居右对齐其子元素（如ul.nav-list） */

  position: fixed; /* 保持导航栏固定在视口顶部 */
  top: 0; /* 固定在顶部 */
  left: 10vw; /* 与body的左边距对齐 */
  width: 80vw; /* 宽度与body内容区域匹配 */
  background-color: red; /* 导航栏背景色 */
  /* 移除固定高度（如height: 6vh），让导航栏高度自适应内容，增强响应性 */
}

.nav-list {
  /* 作为Flex Item，不再需要position: absolute和right属性 */
  list-style: none; /* 移除默认列表样式 */
  margin: 1% 0; /* 保持原有的垂直外边距，可根据需要调整 */
  padding: 0; /* 移除默认内边距 */
}

.nav-items {
  display: inline-block; /* 使列表项水平排列在同一行 */
  font-size: 20px;
  padding: 0 1vw; /* 列表项之间的水平间距 */
}

.nav-items a {
  text-decoration: none; /* 移除链接下划线 */
  color: inherit; /* 继承父元素的文本颜色 */
}

/* 全局样式与重置 */
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  margin: 0 10vw;
  background-color: #E7E7E7;
}

.main-site {
  background-color: white;
}

/* 导航栏样式 */
nav {
  display: flex;             /* 启用Flexbox布局 */
  align-items: center;       /* 垂直居中其子元素 */
  justify-content: flex-end; /* 水平居右对齐其子元素 */

  position: fixed;           /* 固定导航栏位置 */
  top: 0;                    /* 固定在视口顶部 */
  left: 10vw;                /* 与body的左边距对齐 */
  width: 80vw;               /* 宽度与body内容区域匹配 */
  background-color: red;     /* 导航栏背景色 */
  /* height: auto; 导航栏高度将根据内容自适应 */
}

.nav-list {
  list-style: none;          /* 移除列表样式 */
  margin: 1% 0;              /* 垂直外边距，可根据需要调整 */
  padding: 0;                /* 移除默认内边距 */
}

.nav-items {
  display: inline-block;     /* 使列表项水平排列 */
  font-size: 20px;
  padding: 0 1vw;            /* 列表项之间的水平间距 */
}

.nav-items a {
  text-decoration: none;     /* 移除链接下划线 */
  color: inherit;            /* 继承父元素颜色 */
}

/* 其他页面内容样式 */
.main-body {
  padding-top: 6vh;          /* 为固定导航栏留出空间 */
}