调整大小按钮 [英] 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;
}

我的想法是，如果每一次我调用这个类我可以通过在规模和hey- preSTO！....但不是....

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

通过添加宽度和高度为我所说的按钮类，似乎没有什么做它的大小。有谁知道我能做到这一点？和，如果我把宽度和高度在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.

推荐答案

您不应该使用宽度和高度属性直接，使用类似的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:

＆LT; D​​IV CLASS =button风格=宽度：60像素;高度：30PX;＆gt;这是一个按钮＆LT; / DIV＆GT;

请注意，但是，内嵌样式一般应避免，因为它使得维护和款式更新的噩梦。就个人而言，如果我有一个按钮，造型像你这样的也想申请不同的尺寸，我会与多个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:

HTML

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

CSS

.button {
    background-color: #000000;
    color: #FFFFFF;
    float: right;
    padding: 10px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.small-btn {
    width: 50px;
    height: 20px;
}

.medium-btn {
    width: 70px;
    height: 30px;
}

.big-btn {
    width: 90px;
    height: 40px;
}

的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屋！