Html 调整按钮大小

Resizing a button

提问by heyred

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

我有一个“按钮”，我希望在整个站点中使用它，但是根据站点中的button位置，我希望它以不同的大小显示。

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

在我的 HTML 中，我尝试过（但它不起作用）：

<div class="button" width="60" height="100">This is a button</div>

And the matching CSS:

以及匹配的 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 classI can just pass in a size and hey-presto!....but not....

我认为，如果每次我调用它时，class我都可以传入一个大小和嘿-presto！....但不是....

By adding the width and height as I call the buttonclassseems 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 CSSthen the buttonwill be the same size everywhere.

通过添加我所说的宽度和高度，buttonclass似乎对它的大小没有任何影响。有谁知道我怎么能做到这一点？如果我把宽度和高度放在里面，CSS那么button到处都是相同的大小。

回答by Anders Arpi

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:

你不应该直接使用 "width" 和 "height" 属性，使用 style 属性就像style="some css here"你想使用内联样式一样：

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

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

Note, however, that inline styling should generally be avoidedsince 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:

但是请注意，通常应避免使用内联样式，因为它会使维护和样式更新成为一场噩梦。就我个人而言，如果我有一个像你一样的按钮样式但也想应用不同的大小，我会使用多个 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 example

jsFiddle 示例

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.

使用这种定义样式的方式会从您的 HTML 标记中删除所有样式信息，如果您想更改所有小按钮的大小，这将使以后更容易 - 您只需在 CSS 中更改它们一次。

回答by Rampant Creative Group

If you want to call a different size for the button inline, you would probably do it like this:

如果您想为按钮内联调用不同的大小，您可能会这样做：

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

Or, a better way to have different sizes (say there will be 3 standard sizes for the button) would be to have classes just for size.

或者，拥有不同尺寸的更好方法（假设按钮有 3 种标准尺寸）是为尺寸设置类。

For example, you would call your button like this:

例如，您可以这样调用按钮：

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

And in your CSS

在你的 CSS 中

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

and just create classes for each size you wish to have. That way you still have the perks of using a stylesheet in case say, you want to change the size of all the small buttons at once.

只需为您希望拥有的每种尺寸创建类。这样，您仍然可以使用样式表，以防万一，您想一次更改所有小按钮的大小。

回答by cobaltduck

Another alternative is that you are allowed to have multiple classes in a tag. Consider:

另一种选择是允许您在一个标签中有多个类。考虑：

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

And the CSS:

和 CSS：

 .button {
     /* all your common button styles */
 }

 .big {
     height: 60px;
     width: 100px;
 }
 .small {
     height: 40px;
     width: 70px;
 }

and so on.

等等。

回答by Turnip

Use inline styles:

使用内联样式：

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

Fiddle

小提琴

回答by Dougle

try this one out resizeable button

试试这个可调整大小的按钮

<button type="submit me" style="height: 25px; width: 100px">submit me</button>