如何使 的文本不动[关闭]答案

【问题标题】：How to make text of not move [closed]如何使 的文本不动[关闭]
【发布时间】：2020-09-17 08:09:08
【问题描述】：

我有这个页面：

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

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

【问题讨论】：

请edit 在您遇到问题的代码中包含minimal reproducible example。我们无法帮助您修复我们看不到的代码！
图标占据了白色区域的部分宽度。这意味着
-Element 变小了，Text 仍然在中间。您可以使用位置和 z-index，或者您可以将图标放在 div 中并在

元素的左侧添加一个空 div，该 div 与图标 div 具有相同的宽度，因此

保持居中
这并非不可能，但在不查看标记和样式的情况下帮助您学习如何解决此问题也并非易事。如果您可以将 HTML 和 CSS 添加到问题中，那将有很大帮助 - 谢谢。
@FluffyKitten 在这里发布代码有点棘手，因为我的 HTML 几乎是空的，因为元素是动态创建的。在这种情况下我应该发布 CSS 和 JS 吗？
您可以发布动态生成的 HTML - 创建它的内容无关紧要，它仍然以 HTML 结尾，这就是 CSS 正在应用于的内容:)

标签： javascript html css dom

【解决方案1】：

这可能对你有用：

.todo-item {
  border: 1px blue solid;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.todo-item .remove-icon {
  position: absolute;
  display: none;
  right: 0;
}

.todo-item:hover .remove-icon {
  display: block;
}

<div class="App">
  <h1>
    TODO App
  </h1>
  <div class="todo-item">
    <p>Sleep</p>
    <span class="remove-icon">(Remove)</span>
  </div>
</div>

祝你好运……

【讨论】：

【解决方案2】：

解决此问题的一种非常“老式”的方法是使用absolute 位置图标。

h1{
  background: blue;
  color: white;
  text-align: center;
}

.wrapper{
  position: relative;
  text-align: center;
  padding: 0px 60px;
  border: 1px solid orange;
}

img{
  position: absolute;
  border: 3px solid blue;
  border-radius: 100px;
  margin: auto;
  top: 0; bottom: 0; right: 10px;
}

<div class="elem">
  <h1>Heading</h1>
  <div class="wrapper">
    <p>Center</p>
    <img class"icon" src="https://picsum.photos/30/30" alt="icon" />
  </div>
  <div class="wrapper">
    <p>Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text Very long text </p>
    <img class"icon" src="https://picsum.photos/30/30" alt="icon" />
  </div>
</div>

【讨论】：

【解决方案3】：

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

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

或者，您可以使 P 始终为 90% 宽度，然后它也不会改变，您也不需要绝对位置。为了使文本再次居中，您还可以将其设置为 80% 宽度，左侧边距为 10%。

_{* 90% 和 10% 是示例值，可能是另一个值}

【讨论】：

您好，在图标出现后检查了
，它仍然是相同的宽度。图标在它上面
@DhruvErry 请edit 在您的问题中包含有助于您获得正确答案的任何其他信息。如果没有所有信息（例如代码！），我们只能猜测问题所在，您不太可能得到解决问题的具体答案。

【解决方案4】：

一个简单的解决方法是在“睡眠”容器的左侧添加一个填充或边距，与右侧图标的宽度相同。

【讨论】：

【解决方案5】：

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

.row{
  display: flex;
  flex-direction: row;
  height: 50px;
  width: 500px;
  background-color: grey;
  margin: 0;
  padding: 0;
}

.spacer {
  width: 15%;
  height: 100%;
}
.text{
  text-align: center;
  width: 70%;
  height: 100%;
  background-color: blue;
  margin: 0;
  padding: 0;
}
.icon{
  width: 15%;
  height: 100%;
  opacity: 0;
}
.icon:hover {
  background-color: red;
  opacity: 100;
}

<div class="row">
  <div class="spacer">
  </div>
  <p class="text">Sleep</p>
  <div class="icon">
    Icon here
  </div>
</div>

【讨论】：

【解决方案6】：

总结：

您的问题来了，因为首先在 tags 中您必须添加text-align:center，其次因为您的 tag 和 - icon whatever tag you have used are siblings 以及 的宽度在添加时会发生变化。

由于它不应破坏  元素，因此您应该使用 position:absolute，因为它不会影响您的“页面中 UI 的正常流动”。

body {background: #ccccff;padding:20px;}
.container{width:500px;margin:auto;text-align:center;}
div {font-size:30px;}
p {background:blue;text-align:center;margin:0;position:relative;}
.minimise {position:absolute;background: red;top:0px;right:20px;}

<body>

<div class="container">
  <div>Things to do.</div>
  <p>Sleep</p>
</div>

<div class="container">
  <div>Things to do.</div>
  <p>Sleep <span class="minimise"> - </span></p>
</div>



</body>

【讨论】：