Html 更改待办事项列表上滑出图标的位置

我用jQuery和Bootstrap创建了一个待办事项列表。当您将鼠标悬停在列表项上时，垃圾桶图标（添加到每个

li

元素的

span

元素内的HTML中）从左侧滑出，并将列表推向右侧。我想让它从右边滑出，而不移动每个列表项中的文本（显示在其上方）。如何做到这一点

以下是相关代码（查看更多信息）：

HTML

---

我们需要从侧面更改

span

首先，我们需要将

li

转到

相对位置

li {
  margin-left: 20px;
  position: relative;
}

然后我们可以改变跨度的两边

span {
  margin-right: 0px;
  position: absolute;
  right: 0;
}

希望这有帮助：）


$（函数（）{
设度=90；
//旋转“+”并在单击时下拉或重新关闭输入框
$（'.fa plus'）。在（'click'，function（）上{
如果（度===135）{
度=45；
}
//设置CSS转换属性。选择器“this”指正在单击的“+”（类为“.fa plus”）
$（this.css）({
“-webkit变换”：“旋转（“+degree+”deg）”，
“-moz变换”：“旋转（“+degree+”deg）”，
“-ms变换”：“旋转（“+度+”度）”，
“-o变换”：“旋转（“+度+”度）”，
“变换”：“旋转（“+度+”度）”，
“过渡”：“0.2s线性”
});
学位+=45；
//设置文本框不透明度的动画，在其不透明度达到0（如果可见）时将其“显示样式”属性设置为“无”，如果已隐藏，则将其“显示样式”属性设置为“无”
$（'input[type=“text”]”）。fadeToggle（）；
});
//单击后检查特定项目并将其添加到类“已完成”
$（'ul'）。在（'click'，'li'，function（）上{
$（this.toggleClass（'completed'）；
});
//单击以删除
$（'ul'）。在（'click'，'span'，函数（e）上{
//fadeOut（）通过将元素设置为透明来隐藏元素
$（this.parent（）.fadeOut（500，function（））{
//删除元素及其数据和事件
$（this.remove（）；
});
//防止事件在DOM树上冒泡，并将其通知任何父处理程序
e、 停止传播（）；
});
$（'input[type=“text”]”）。在（'keypress'，函数（e）上{
//如果用户点击回车键。。。
如果（e.which==13）{
//从输入中获取新的待办事项列表项
让itemText=$（this.val（）；
//如果输入框中没有任何内容，则停止函数执行
如果（itemText==''）返回；
//清除输入框
$（this.val（“”）；
//从输入创建新的li并添加到ul的开头
$（'ul'）.prepend（'
'+itemText+'
'）；
}
});
});
正文{
保证金：0；
字体系列：Roboto，无衬线；
背景#642B73；
背景：-webkit线性梯度（向右，#C6426E，#642B73）；
背景：线性梯度（向右，#C6426E，#642B73）；
}
h1{
背景#642B73；
颜色：白色；
保证金：0；
填充：10px 20px；
文本转换：大写；
字体大小：24px；
字体大小：正常；
}
保险商实验室{
列表样式：无；
保证金：0；
填充：0；
}
李{
背景：白色；
高度：40px；
线高：40px；
颜色：#666；
位置：相对位置；
左边距：20px；
}
/*设置偶数li元素的颜色*/
李：第n个孩子（偶数）{
背景：#f7f7f7；
}
/*样式引导垃圾桶图标*/
跨度{
背景：#e74c3c；
高度：40px；
宽度：0px；
显示：内联块；
不透明度：0；
/*右边距：20px*/
文本对齐：居中；
颜色：白色；
过渡：0.2s线性；
位置：绝对位置；
右：0；
}
/*当用户将鼠标悬停在li上时，设置span内容的外观（引导垃圾箱图标）*/
李：悬停跨度{
宽度：40px；/*适用于图标背景*/
不透明度：1.0；
}
输入{
字号：1em；
背景：#f7f7f7；
宽度：100%；
高度：40px；
/*从第一行文字顶部到第二行文字顶部的距离*/
线高：40px；
/*顺序：上、右、下、左*/
填充：13px 13px 13px 20px；
/*在元素的总宽度和高度中包括填充和边框*/
框大小：边框框；
-webkit框大小：边框框；
-moz框大小：边框框；
颜色：#C6426E；
边框：3倍实心rgba（0,0,0,0）；
}
/*设置用户单击内部时输入框边界的外观*/
输入：焦点{
背景：白色；
边框：3px实心#642B73；
大纲：无；
}
.完成{
颜色：灰色；
文字装饰：线条贯通；
}
法加{
浮动：对；
位置：相对位置；
顶部：5px；
}
.集装箱{
保证金：100像素自动；
背景：#f7f7f7；
宽度：360px；
盒影：0.50pxRGBA（0,0,0,0.1）；
}

待办事项清单
待办事项清单

做一个小时的项目
散步
沉思
伸展

我要感谢您将两个不同的问题放在两个不同的SO问题上。我们总是会在帖子中遇到许多与原文不同的问题。希望我的答案对你有所帮助，并继续编码！看起来它奏效了，请不要忘记投票并接受答案，除非你还需要其他东西。那样的话，我将非常乐意帮助你。谢谢
li {
  margin-left: 20px;
  position: relative;
}

span {
  margin-right: 0px;
  position: absolute;
  right: 0;
}