html - 如何使用 CSS 更改 <button> 标签的样式

Question

我真的很困惑为什么这段代码不能用于设置按钮的样式。有谁知道为什么这不起作用？？

.button2 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

<div class="smallButtons" style="clear: both;">
	<button class="button2">ADD TO REGISTRY</button>
	<button class="button2">ADD TO LIST</button>
	<button class="button2">SHARE</button>
</div>

https://jsfiddle.net/865eg40w/#&togetherjs=6RiA5b06zJ

Answer 1

问题出在您的 css 中的空白区域。 我已经在下面复制了您的 css 和 html，并且还复制了一份副本，除了两点外，其他方面都完全相同:

• 我的 css 类称为 .button22(因此我们可以在 相同的片段)
• 我删除了你 CSS 行之间的所有空白，然后 使用空格键将它们添加回去。

您的 CSS 不起作用，但我的相同 CSS 除了空白之外可以起作用 - 运行该代码段，您将看到两行按钮。

.button2 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.button22 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;

}

<div class="smallButtons" style="clear: both;">
	<button class="button2">ADD TO REGISTRY</button>
	<button class="button2">ADD TO LIST</button>
	<button class="button2">SHARE</button>
</div>


<div class="smallButtons" style="clear: both;">
	<button class="button22">ADD TO REGISTRY</button>
	<button class="button22">ADD TO LIST</button>
	<button class="button22">SHARE</button>
</div>

至于为什么你的空格会破坏它，我无法回答，但我可以告诉你，替换它会解决问题!