调整按钮大小

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 我可以只传递一个大小和嘿-presto！....但不是....

通过添加宽度和高度，我称之为button class 似乎对它的大小没有任何作用。有谁知道我该怎么做？如果我将宽度和高度放在CSS 中，那么button 将在任何地方都是相同的大小。

Answer 1

你不应该直接使用“宽度”和“高度”属性，如果你想使用内联样式，请使用样式属性，如style="some css here"：

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

使用这种定义样式的方式会从您的 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; }

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

Answer 3

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

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

还有 CSS：

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

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

等等。

Answer 4

使用内联样式：

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

Fiddle

Answer 5

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

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