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

时间:2017-08-29 07:18:28

标签: html css

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

&#13;
&#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;
&#13;
&#13;

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

6 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分: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>

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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

希望这会对你有所帮助

&#13;
&#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;
&#13;
&#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页面中。