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に、サイズを渡すだけでいいと思いました....しかし、そうではありません....

私が呼んでいるように幅と高さを追加することで、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

もう1つの方法は、タグに複数のクラスを含めることができるようにすることです。検討：

 <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 に答える
2

インライン スタイルを使用します。

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

フィドル

于 2012-07-27T14:06:37.160 に答える