Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

在你的小提琴上，.button2课前有一些额外的空格。只需删除它即可完成。

Answer 2

问题在于你的CSS中的空白区域。我复制了你的css＆amp;下面的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>

至于为什么你的空白正在破坏它，我无法回答，但我可以告诉你，更换它将解决问题！

Answer 3

尝试使用其他网络浏览器打开

Answer 4

希望这会对你有所帮助

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
.button2 { 
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    }
</style>
</head>
<body>

<button class="button2">
This is a Button
</button>

</body>
</html>

＆＃13;

Answer 5

在你的html中尝试使用id而不是class。

Answer 6

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

<button class="button2">
This is a Button
</button>

将您的button2类放入CSS文件中，并将其添加到HTML页面中。

如何使用CSS更改<button>标记的样式

6 个答案: