侧边栏菜单图标完美对齐技巧
本文介绍一种方法，解决侧边栏菜单中图标与容器右边缘对齐的问题，确保图标位置不受左侧文本长度影响。
问题描述：
侧边栏菜单包含图标和文本，如何让图标始终与菜单容器右边缘对齐？
解决方案：
使用CSS的浮动和内边距属性实现：
- 浮动 (float): 将最后一个图标元素设置为右浮动 (float: right;)，使其向右移动并与容器右边缘对齐。
- 内边距 (padding-left): 使用内边距 (padding-left) 调整图标与左侧文本的间距，控制图标与文本之间的距离。
CSS 代码：
ul > li > a > i:last-child {
float: right;
padding-left: 10px; /* 可根据需要调整 */
}HTML 示例 (假设使用 标签表示图标):
<ul> <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"><i></i>文本1</a></li> <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"><i></i>较长的文本2</a></li> <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"><i></i>文本3</a></li> </ul>
效果：
无论左侧文本长度如何变化，右侧图标都将保持与容器右边缘对齐。 通过调整 padding-left 值，可以微调图标与文本间的间距。