如何使用CSS实现导航栏元素分别对齐：链接居中、按钮居右

使用Flex布局可以非常简便的实现你要的对齐效果，无需复杂的浮动或定位设置，修改步骤如下：

1. 修改nav ul的基础样式 #

删除原有nav ul中的text-align: left属性，新增Flex布局相关配置：

nav ul {
  list-style: none;
  background: black;
  /* 新增以下属性 */
  display: flex;
  align-items: center; /* 垂直方向居中所有元素，避免高度错位 */
  justify-content: center; /* 默认让所有子元素水平居中 */
}

2. 给Sign Out按钮添加右对齐样式 #

利用Flex布局的margin-left: auto特性，自动占据按钮左侧所有剩余空间，将按钮推到最右侧：

nav ul button {
  margin-left: auto;
  margin-right: 20px; /* 可选，添加右侧边距避免按钮贴边 */
  cursor: pointer; /* 可选，优化鼠标悬停显示 */
}

完整修改后的CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace;
  font-size: 20px;
}

nav ul {
  list-style: none;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
}


nav ul li {
  display: inline-block;
  padding: 20px;
  transition: all ease-in-out 250ms;
}

ul li a {
  color: white;
  text-decoration: none;
}

nav ul li:hover {
  background: red;
}

/* 新增按钮对齐样式 */
nav ul button {
  margin-left: auto;
  margin-right: 20px;
  cursor: pointer;
}

可选进阶优化：如果需要两个链接完全水平居中，不受右侧按钮宽度的影响，可以调整HTML结构：将两个li元素放入同一个<div class="nav-center">容器中，在ul最左侧添加一个空的<div class="nav-left">占位元素，再修改CSS配置：

nav ul {
  justify-content: space-between;
}
.nav-left, .nav-center, nav ul button {
  flex-basis: 33.33%;
}
.nav-center {
  display: flex;
  justify-content: center;
}

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