求助：导航菜单无法右对齐（附HTML及无效CSS代码）

没问题，我来帮你搞定这个导航栏右对齐的问题！你之前的尝试没生效，主要是因为没处理好导航菜单容器（ul）的默认样式和布局层级关系。下面给你两种靠谱的解决方案：

方法1：Flexbox布局（推荐，现代浏览器友好） #

Flexbox是目前最简洁的布局方式，能轻松实现右对齐，还不用处理浮动的清除问题：

/* 先重置ul的默认样式，去掉自带的内边距和列表符号 */
nav#main ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 启用Flexbox布局 */
  display: flex;
  /* 让子元素（菜单项）靠右排列 */
  justify-content: flex-end;
  gap: 20px; /* 可选：给菜单项之间添加间距，更美观 */
}

nav#main li {
  text-align: center;
}

/* 注意：文本装饰是给链接设置的，不是li */
nav#main a {
  text-decoration: none;
}

你的HTML结构不用修改，直接替换这段CSS就能看到效果。

方法2：浮动布局（兼容旧浏览器） #

如果需要兼容IE等旧浏览器，可以用浮动的方式，但要注意处理好容器的浮动和清除：

nav#main ul {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 让整个菜单容器靠右浮动 */
  float: right;
}

nav#main li {
  float: left; /* 菜单项横向排列 */
  margin-left: 20px; /* 菜单项之间的间距 */
  text-align: center;
}

nav#main a {
  text-decoration: none;
}

/* 清除nav的浮动，避免影响后续页面布局 */
nav#main::after {
  content: "";
  display: table;
  clear: both;
}

为什么之前的尝试没生效？ #

你之前只给nav#main设置float: right，但ul默认是块级元素，会占满nav的整个宽度，而li是float: left，所以还是会在ul内部靠左排列，看起来导航还是在左边。现在我们直接让ul（或者用Flexbox控制）靠右，就能让整个菜单对齐到右侧啦。

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