如何在悬停时将文本向左移动？答案

【问题标题】：How to move text to left on hover?如何在悬停时将文本向左移动？
【发布时间】：2019-05-27 12:58:13
【问题描述】：

当鼠标光标悬停在按钮上时，文字向下移动，我只需要将文字向左移动5px，当鼠标悬停在按钮上时，如何实现？

div {
  text-align: center;
}

span {
  margin-right: 10px;
}

button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div>
  <span>test</span><button>&#10230;</button>
</div>

【问题讨论】：

编者，格式化时请不要更改CSS
我不太明白。您是否希望将文本锁定在其 Y 轴上并在其 X 轴上移动 5px？
是的。按钮悬停时仅在 x 轴上移动

标签： html css animation layout hover

【解决方案1】：

您面临的“问题”是 span 元素的显示类型是内联的，因此它将跟随其兄弟元素。

我想有多种方法可以解决这个问题。

您可以将vertical-align: top; 添加到跨度。（超级简单的 css 修复，保留 HTML 原样。缺点：将文本修复到元素顶部）

div {
  text-align: center;
}

span {
  vertical-align: top;
  margin-right: 10px;
}

button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div>
  <span>test</span><button>&#10230;</button>
</div>

要真正解决这个问题（不在元素顶部流动文本），您需要在跨度之外添加一个包装器元素：

.center {
  text-align: center;
}

span {
  margin-right: 10px;
}
.wrapper {
 display:inline-block;
}
button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div class="center">
  <p class="wrapper"><span>test</span></p><button>&#10230;</button>
</div>

您还可以将父级显示为 flex 并相应地调整子级：

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  margin-right: 10px;
}

button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div class="flex">
  <div><span>test</span></div><button>&#10230;</button>
</div>

【讨论】：