Font Awesome Unicode图标如何完全右对齐至菜单宽度末端

我之前也碰到过一模一样的情况，其实问题核心在于：你的<a>标签默认是行内元素，它的宽度只包裹自身文本内容，所以float: right只能让图标在链接文本的右侧移动，没法触达整个菜单项的最右端。下面给你几个实用的解决办法，按需选用就行：

方法1：让链接撑满整个菜单项宽度 #

给<a>标签设置块级显示并占满父元素宽度，这样float: right就能在整个菜单项范围内生效：

#menu li {
  /* 确保li元素占满父容器宽度，或者设置固定宽度 */
  width: 100%;
}
#menu li a {
  display: block;
  width: 100%;
  padding-right: 25px; /* 给图标预留右侧空间，避免贴边 */
  box-sizing: border-box; /* 防止padding额外增加元素总宽度 */
}
#menu li a:after {
  font-family: FontAwesome;
  content: "\f054";
  display: inline-block;
  float: right;
  padding-left: 10px;
  vertical-align: middle;
}

方法2：用Flex布局（推荐，更简洁） #

Flex布局天生适合这种两端对齐的场景，完全不用折腾float的各种坑：

#menu li a {
  display: flex;
  justify-content: space-between; /* 自动让文本左对齐、图标右对齐 */
  align-items: center; /* 让文本和图标垂直居中对齐 */
  width: 100%;
}
#menu li a:after {
  font-family: FontAwesome;
  content: "\f054";
  padding-left: 10px;
}

这个方案代码更干净，还能避免float可能导致的父元素高度塌陷等问题，现在主流浏览器都完全支持。

方法3：绝对定位法（适合固定宽度的菜单） #

如果你的菜单是固定宽度的，用绝对定位也能精准控制图标位置：

#menu li {
  position: relative; /* 把li设为图标的定位父容器 */
  width: 220px; /* 假设菜单固定宽度 */
}
#menu li a {
  display: block;
  padding-right: 30px; /* 给图标预留位置 */
}
#menu li a:after {
  font-family: FontAwesome;
  content: "\f054";
  display: inline-block;
  position: absolute;
  right: 10px; /* 控制图标距离右侧的间距 */
  top: 50%;
  transform: translateY(-50%); /* 让图标垂直居中 */
}

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