我有一个“按钮”,我想在我的网站上使用所有,但根据按钮所在的网站的位置,我希望它以不同的大小显示.
在我的HTML中我尝试过(但它不起作用)：
<div class="button" width="60" height="100">This is a button</div>
和匹配的CSS：
.button {
background-color: #000000;
color: #FFFFFF;
float: right;
padding: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
我认为,如果我每次打电话给这个班级,我都可以传递一个大小而且嘿嘿！…但不是….
通过添加宽度和高度,因为我调用按钮类似乎对它的大小没有任何作用.有谁知道我怎么做到这一点？如果我将宽度和高度放在CSS中,则按钮的大小将相同.
解决方法
您不应该直接使用“width”和“height”属性,如果要使用内联样式,请使用style =“some css here”等样式属性：
< div class =“button”style =“width：60px; height：30px;”>这是一个按钮< / div>
但请注意,通常应避免使用内联样式,因为它会使维护和样式更新成为一场噩梦.就个人而言,如果我有一个类似你的按钮样式,但也想要应用不同的大小,我会使用多个css类进行大小调整,如下所示：
.button {
background-color: #000000;
color: #FFFFFF;
padding: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin:10px
}
.small-btn {
width: 50px;
height: 25px;
}
.medium-btn {
width: 70px;
height: 30px;
}
.big-btn {
width: 90px;
height: 40px;
}
<div class="button big-btn">This is a big button</div>
<div class="button medium-btn">This is a medium button</div>
<div class="button small-btn">This is a small button</div>
使用这种定义样式的方式会从HTML标记中删除所有样式信息,如果您想要更改所有小按钮的大小,这将使您更轻松 – 您只需在CSS中更改一次.
