调整按钮大小

Question

我有一个"按钮",我希望在我的网站中使用,但根据网站的button位置,我希望它以不同的大小显示.

在我的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;
}

我假设如果每次我打电话给class我,我都可以通过一个大小而嘿!...但不是....

通过添加我调用的宽度和高度button class似乎对它的大小没有任何作用.有谁知道我怎么做到这一点？如果我把宽度和高度放在那里,CSS那么button到处都是相同的尺寸.

Answer 1

您不应该直接使用"width"和"height"属性,style="some css here"如果要使用内联样式,请使用style属性:

<div class="button" style="width:60px;height:30px;">This is a button</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>
 

jsFiddle例子

使用这种定义样式的方式会从HTML标记中删除所有样式信息,如果您想要更改所有小按钮的大小,这将使您更轻松 - 您只需在CSS中更改一次.

Answer 2

如果你想为内联按钮调用不同的大小,你可能会这样做:

<div class="button" style="width:60px;height:100px;">This is a button</div>

或者,一个更好的方法来拥有不同的大小(比如按钮将有3个标准尺寸)就是只有大小的类.

例如,您可以像这样调用您的按钮:

<div class="button small">This is a button</div>

在你的CSS中

.button.small { width: 60px; height: 100px; }

并为您希望拥有的每个尺寸创建类.这样你仍然可以使用样式表,例如,你想要一次改变所有小按钮的大小.