侧边栏菜单图标如何与容器右边缘对齐？

侧边栏菜单图标完美对齐技巧

本文介绍一种方法，解决侧边栏菜单中图标与容器右边缘对齐的问题，确保图标位置不受左侧文本长度影响。

问题描述：

侧边栏菜单包含图标和文本，如何让图标始终与菜单容器右边缘对齐？

解决方案：

使用CSS的浮动和内边距属性实现：

• 浮动 (float): 将最后一个图标元素设置为右浮动 (float: right;)，使其向右移动并与容器右边缘对齐。
• 内边距 (padding-left): 使用内边距 (padding-left) 调整图标与左侧文本的间距，控制图标与文本之间的距离。

CSS 代码：

ul > li > a > i:last-child {
  float: right;
  padding-left: 10px; /* 可根据需要调整 */
}

HTML 示例 (假设使用 标签表示图标):

  
文本1
  
较长的文本2
  
文本3