我真的很困惑为什么这段代码不能用于设计按钮样式。有谁知道为什么这不起作用?
.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>
&#13;
答案 0 :(得分:2)
在你的小提琴上,.button2
课前有一些额外的空格。只需删除它即可完成。
答案 1 :(得分:2)
问题在于你的CSS中的空白区域。 我复制了你的css&amp;下面的html并制作了一个副本,除了两件事以外,各方面都是相同的:
.button22
(所以我们可以测试这两个类
相同的片段)您的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>
至于为什么你的空白正在破坏它,我无法回答,但我可以告诉你,更换它将解决问题!
答案 2 :(得分:1)
尝试使用其他网络浏览器打开
答案 3 :(得分:0)
希望这会对你有所帮助
<!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;
答案 4 :(得分:0)
在你的html中尝试使用id而不是class。
答案 5 :(得分:0)
.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页面中。