如何调整jQuery+Bootstrap待办列表滑出图标至右侧且不移动文本

要实现垃圾桶图标从右侧滑出且不移动列表文本的效果，核心是让图标脱离文档流（绝对定位），这样它的显示/隐藏就不会影响文本布局，同时修改动画的方向参数。以下是具体步骤：

1. 给列表项设置相对定位容器 #

首先需要把<li>设为相对定位容器，这样内部的垃圾桶图标（<span>）可以基于它进行绝对定位：

li {
  position: relative; /* 新增：作为绝对定位的参考父容器 */
  /* 保留你原有的其他样式，比如padding、background、line-height等 */
}

2. 重新设置垃圾桶图标的定位与动画 #

修改<span>的CSS，让它默认隐藏在列表项的右侧外部，hover时滑入到列表项的右侧边缘：

li span {
  position: absolute; /* 脱离文档流，不占用文本空间 */
  top: 0;
  right: -40px; /* 初始状态：完全隐藏在li右侧外（假设图标宽度为40px） */
  width: 40px;
  height: 100%;
  /* 保留你原有的样式，比如background-color、display:flex、align-items:center等 */
  transition: right 0.3s ease; /* 动画改为修改right属性，实现从右滑入 */
}

/* hover时让图标滑入到li右侧 */
li:hover span {
  right: 0;
}

3. 移除原有影响布局的样式 #

如果你的原有代码中给<span>设置了float: left或者margin-left这类会推动文本的样式，记得删除它们——现在用绝对定位不需要这些了。

效果说明 #

• 绝对定位的<span>不会占用文档流空间，hover时不会推动列表文本，而是直接覆盖在文本上方。
• 通过修改right属性的过渡动画，实现了图标从右侧外部滑入到可见区域的效果。

如果需要调整图标的滑入速度，修改transition中的0.3s参数即可；如果图标宽度不是40px，对应调整right的初始值和width即可。

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