Question

我一直试图创建一个按钮，如果它的字体悬停，它的字体大小会增加。它有效，但问题是当字体变大时盒子本身会变大。一种解决方案可能是拥有固定的高度，但我需要它保持auto。

但是一旦字体大小发生变化，盒子高度就不会再自动改变，而是保持相同的大小。

＆＃13;

#btn {
  width: 40%;
  /* setting a height would fix this, but it must be auto */
  padding: 10px;
  background-color: #00A859;
  transition: font 0.5s ease-in;
  font-size: 16px;
}

#btn:hover {
  font-size: 22px;
}

＆＃13;

<div id="btn">Hover me!</div>

＆＃13;

Answer 1

设置字体大小的行高，以便即使字体发生变化也会保持不变。

#btn {
  width: 40%;
  /* setting a height would fix this, but it must be auto */
  padding: 10px;
  background-color: #00A859;
  transition: font 0.5s ease-in;
  font-size: 16px;
  line-height: 16px;
}

#btn:hover {
  font-size: 22px;
}

<div id="btn">Hover me!</div>

Answer 2

您可以通过将line-height: 20px;添加到#btn

来简单地实现此目的

＆＃13;

#btn {
  width: 40%;
  /* setting a height would fix this, but it must be auto */
  padding: 10px;
  background-color: #00A859;
  transition: font 0.5s ease-in;
  font-size: 16px;
  line-height: 20px;
}

#btn:hover {
  font-size: 22px;
}

＆＃13;

<div id="btn">Hover me!</div>

＆＃13;

Answer 3

你能把它包装成固定大小的div吗？无论如何，你似乎需要修复一个边界容器（按钮本身或div）。

或者，您可以通过增加字体同时减少填充来获得类似的效果。

Answer 4

试试这个托马斯！

#btn {
  width: 40%;
  /* setting a height would fix this, but it must be auto */
  padding: 10px;
  background-color: #00A859;
  transition: font 0.5s ease-in;
  font-size: 16px;
  line-height: 22px;
}

#btn:hover {
  font-size: 22px;
}

<div id="btn">Hover me!</div>

更改字体大小而不更改框大小

4 个答案: