更改字体大小而不更改框的大小
问题描述:
我一直在试图创建一个按钮,如果它悬停,它的字体大小会增加。它的工作原理,但问题是,当字体变大时,盒子本身变得更大。一种解决方案可能是固定高度,但我需要它保持为auto
。更改字体大小而不更改框的大小
但是,一旦字体大小改变,盒子高度不会再自动变化,而是保持相同的大小。
#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;
}
<div id="btn">Hover me!</div>
答
设置字体大小的行高,因此将保持不变甚至字体的变化。
#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>
答
你可以用它在一个固定大小的div?无论如何,你似乎需要修复一个边界容器(按钮本身或div)。
或者,您可以通过增加字体来获得类似的效果,同时减少填充。
答
你可以简单地实现这一目标,通过添加line-height: 20px;
到#btn
#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;
}
<div id="btn">Hover me!</div>
答
试试这个托马斯!
#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>