17

我有一个“按钮”，我希望在整个站点中都使用它，但是根据站点的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到处都是相同的大小。

4

5 回答 5

19

你不应该直接使用“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 中更改一次。

于 2012-07-27T14:07:05.003 回答
6

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

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

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

于 2012-07-27T14:10:47.607 回答
2

使用内联样式：

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

小提琴

于 2012-07-27T14:06:37.160 回答
2

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

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

等等。

于 2012-07-27T14:12:06.717 回答
-4

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

<button type="submit me" style="height: 25px; width: 100px">submit me</button>
于 2014-08-07T08:35:39.070 回答