调整按钮大小 [英] Resizing a button

问题描述

我有一个按钮，我希望在整个网站使用，但根据在网站的按钮是，我想要显示在不同的尺寸。

I have a "button" that I wish to use all throughout my site, but depending on where in the site the button is, I want it to display at different sizes.

在我的HTML中，我尝试过（但不工作）：

In my HTML I have tried (but its not working):

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

我假设如果每次调用

I assumed that if each time I call this class I can just pass in a size and hey-presto!....but not....

通过添加宽度和高度，我可以通过一个尺寸和hey-presto！因为我调用按钮 class 似乎对它的大小什么都不做。有谁知道我怎么能这样做？如果我把宽度和高度放在 CSS 中，则按钮 >

By adding the width and height as I call the button class seems to do nothing to the size of it. Does anyone know how I can do this? And if I put the width and height in the CSS then the button will be the same size everywhere.

推荐答案

您不应该直接使用width和height属性，使用样式属性 style =一些css在这里如果你想使用内联样式：

You should not use "width" and "height" attributes directly, use the style attribute like style="some css here" if you want to use inline styling:

< div class =buttonstyle = width：60px; height：30px;>这是一个按钮< / div>

内联样式一般应避免，因为它使维护和样式更新是一场噩梦。个人而言，如果我有一个类似于你的按钮样式，但也想应用不同的大小，我将使用多个css类的大小，如下：

Note, however, that inline styling should generally be avoided since it makes maintenance and style updates a nightmare. Personally, if I had a button styling like yours but also wanted to apply different sizes, I would work with multiple css classes for sizing, like this:

   .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中更改它们一次。

Using this way of defining styles removes all style information from your HTML markup, which in will make it easier down the road if you want to change the size of all small buttons - you'll only have to change them once in the CSS.

这篇关于调整按钮大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！