如何更改字体大小，而不更改CSS中按钮的大小

Question

在下面的代码中，我想改变内部字体大小而不是按钮大小。

<html>
<head>
<style>
.sm
{
font-size:x-small;
}
</style>
</head>
<body>
<button class="sm">
submit
</button>
</body>
</html>

Answer 1

要在不更改按钮大小的情况下更改文本大小，您需要修复按钮的大小。这可以使用CSS中的height和width来完成。这样你可以改变font-size而不影响按钮大小。

看看下面的代码。如你所见，随着height和width的改变，按钮现在是一个固定的大小。这可以通过大于按钮的文本来证明。

CSS

button {
  font-size: 30px;
  height: 60px;
  width: 60px;
}

HTML

<button>
Hello
</button>

Answer 2

你也可以使用span标签，这对我很有用。

 <button><span style="font-size:10px;">ClickMe</span></button>

Answer 3

改变你的风格

.sm
{
  font-size:20px;
  height:30px;
  width: 120px;
}

希望这可以帮助！

Answer 4

只需将文本包装在div标签中并在css中进行编辑即可