Javascript 如何制作<；p>；不动

我有这一页：

当我将鼠标悬停在项目上时，会发生以下情况：

---

我需要做的是，当减号图标出现时，文本不应该向左移动。我该怎么做？

发生这种情况的原因（可能）是因为在第一张图像中，p是100%宽度，在第二张90%宽度中，负数是其他10%。在这两种情况下，文本都在中间。您可以向P添加背景色以更好地查看效果

有多种解决方案，但我倾向于将负位置设为绝对值。这样它就没有了“no”，因为它将是P上的一层。在悬停时，P仍然是100%宽度

或者，你可以让p始终保持90%的宽度，那么它也不会改变，你不需要绝对位置。为了使文本再次居中，还可以使其宽度为80%，留有10%的边距

---

*90%和10%是示例值，可能是另一个值。一个简单的修复方法是在“Sleep”容器的左侧添加一个与右侧图标宽度相同的填充或边距。

根据html的构建方式，有几种解决方案。一种方法是这样的。如果将间隔元素添加到左侧并将图标放置在div中，则将所有3个元素设置为指定的宽度，无论是否显示图标，p元素都将始终保持居中。将鼠标悬停在右侧灰色区域以显示效果

.row{
显示器：flex；
弯曲方向：行；
高度：50px；
宽度：500px；
背景颜色：灰色；
保证金：0；
填充：0；
}
.垫片{
宽度：15%；
身高：100%；
}
.文本{
文本对齐：居中；
宽度：70%；
身高：100%；
背景颜色：蓝色；
保证金：0；
填充：0；
}
.图标{
宽度：15%；
身高：100%；
不透明度：0；
}
.图标：悬停{
背景色：红色；
不透明度：100；
}

睡眠

图标在这里

这可能适合您：

.todo项{
边框：1px蓝色实心；
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.todo项。删除图标{
位置：绝对位置；
显示：无；
右：0；
}
.todo项目：悬停。删除图标{
显示：块；
}

待办事项应用程序
睡眠

（移除）

解决此问题的一种非常“老式”的方法是通过

绝对

位置图标

h1{
背景：蓝色；
颜色：白色；
文本对齐：居中；
}
.包装纸{
位置：相对位置；
文本对齐：居中；
填充：0px 60px；
边框：1px实心橙色；
}
img{
位置：绝对位置；
边框：3件纯蓝；
边界半径：100px；
保证金：自动；
顶部：0；底部：0；右侧：10px；
}

标题
居中

非常长的文字非常长的文字非常长的文字非常长的文字非常长的文字非常长的文字非常长的文字非常长的文字非常长的文字非常长的文字非常长的文字非常长的文字

摘要：

您的问题之所以出现，是因为首先在

标记中，您必须添加
文本对齐：居中
，其次是因为您的
标记和
-icon您使用的任何标记都是同级
，并且
的宽度在添加时会发生变化

由于它不应中断
元素，因此您应该使用
位置：绝对
，因为它不会影响您的“页面中UI的正常流动”


body{background:#ccccff；padding:20px；}
.container{宽度：500px；边距：自动；文本对齐：居中；}
div{字体大小：30px；}
p{背景：蓝色；文本对齐：中心；边距：0；位置：相对；}
.最小化{位置：绝对；背景：红色；顶部：0px；右侧：20px；}

要做的事情。
睡眠

要做的事情。
睡眠-

请将您的问题包括在您遇到问题的代码中。我们无法帮助您修复无法看到的代码！图标占白色区域宽度的一部分。这意味着元素变小了，文本仍然在中间。您可以使用位置和z索引，也可以将图标放在一个div中，并在元素的左侧添加一个与图标div宽度相同的空div，因此保持中心编辑并非不可能，但在不查看标记和样式的情况下，帮助您了解如何解决此问题也不是很简单。如果你能将HTML和CSS添加到问题中，那将非常有帮助-谢谢。@FluffyKitten在这里发布代码有点棘手，因为我的HTML几乎是空的，因为元素是动态创建的。。在这种情况下，我应该发布CSS和JS吗？你可以发布动态生成的HTML——不管是什么创建的，它最终仍然是HTML，这就是CSS应用到的内容：）嗨，在图标显示后检查了，它仍然是相同的宽度。图标位于屏幕上方it@DhruvErry请在您的问题中加入任何有助于您获得正确答案的附加信息。如果没有所有的信息（比如代码！），我们只能猜测问题出在哪里，你不可能得到解决问题的具体答案。