如何将header内<nav>中的<li>元素设置为右对齐？

你的问题大概率是因为<ul>标签自带默认的内边距（padding-left），或者容器没有占满可用宽度，导致text-align:right没生效。下面是几种简单的解决方法：

方法1：修复text-align方案 #

先重置<ul>的默认样式，再让容器占满宽度并设置右对齐：

/* 重置ul的默认边距和内边距 */
.item {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 让nav或者ul占满宽度，再设置右对齐 */
.main-nav {
  width: 100%;
}
.item {
  text-align: right;
}

/* 保留你的inline-block设置，可选添加间距 */
.items {
  display: inline-block;
  margin-left: 16px;
}

方法2：用Flex布局（推荐） #

Flex布局更简洁灵活，无需依赖inline-block：

.item {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 启用flex布局 */
  display: flex;
  /* 让子元素靠右排列 */
  justify-content: flex-end;
  /* 可选：控制li之间的间距 */
  gap: 16px;
}

/* 这里可以保留display:inline-block，也可以去掉 */
.items {
  /* display: inline-block; */
}

方法3：传统浮动方案 #

如果需要兼容老旧浏览器，可以用浮动实现：

.item {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 清除浮动，防止父容器高度塌陷 */
  overflow: hidden;
}

.items {
  /* 让li靠右浮动 */
  float: right;
  margin-left: 16px;
}

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