html - 如何在悬停时将文本向左移动？

Question

当鼠标光标悬停在按钮上时，文字向下移动，我只需要将文字向左移动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>

Answer 1

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

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

您可以将 vertical-align: top; 添加到跨度。 ( super 简单的 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>