调整按钮大小

Question

调整按钮大小

22

我有一个“按钮”，希望在整个网站中使用，但根据 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时只需要传入一个大小就可以了，但事实并非如此。

在调用buttonclass时添加宽度和高度似乎对其大小没有影响。有没有人知道我该怎么做？如果我将宽度和高度放在CSS中，则button的大小将在所有地方保持一致。

- heyred

如果您想以不同的宽度显示，为什么要使用内联宽度和高度属性？ - SVS

5个回答

7

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

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

你可以为你想要的每种尺寸创建一个类，这样你仍然可以享受使用样式表的好处，以便一次性更改所有小按钮的大小。

- Rampant Creative Group

1

第二个选项加一分。在整个网站中分离样式并使其保持一致是很好的。但是，我可能会将您的“大小”类命名为.button-small，并将HTML属性命名为class="button button-small"。.small有点太通用了。您的“子类”应该与您的“超类”有一些联系。 - Ryan Kinal

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

以及其他相关内容。

- cobaltduck

请查看我在此答案中的评论以了解正确使用方法。 - Ryan Kinal

哇，当我打这个答案时，已经有三个几乎相同的答案发布了。这是多么独立的验证啊！ - cobaltduck

我还以为你们都在抄袭我呢.. ;) 但是没错 - 很高兴看到我们都同意这一点！ - Anders Arpi

2

使用行内样式：

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

Fiddle

- Turnip

这种方法特别有效，因为内联样式会覆盖在CSS中定义的样式。 - Derreck Dean

-4

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

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

- Dougle

你确定没有其他方法可以回答这个问题，而不需要让提问者下载一个看起来很可疑的压缩文件吗？ - ggdx

仅提供链接的答案不被视为适当的答案，该网站不予采纳。 - Neeku

这个可调整大小的功能是如何实现的？ - ggdx

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anders Arpi · Accepted Answer

如果您想使用内联样式，请不要直接使用“width”和“height”属性，而是使用样式属性，例如style="这里放一些css"：

<div class="button" style="width:60px;height:30px;">这是一个按钮</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>

使用这种定义样式的方式可以将所有样式信息从HTML标记中删除，这将使得如果您想更改所有小按钮的大小，那么在CSS中只需更改一次即可，这会让以后的工作更加容易。

jsFiddle 示例