1

私はこの単純なレイアウトを持っています: 

<form>  
<div>  
<input class="buttonStyle" type="submit" name="action" value="Press this button to do Action A">  
</div>  
<div>  
<input class="buttonStyle" type="submit" name="action" value="Press this">  
</div>  
<div>  
<input class="buttonStyle" type="submit" name="action" value="Press!">  
</div>  
</form>

ボタンが大きく、ボタンの間にスペースがあるように、このシンプルなスタイルを使用します。 

.buttonStyle {  
    margin-bottom: 10px;      
    border: none;  
    cursor: pointer;  
    font-size: 20px;  
    border-radius: 5px;      
}

私が抱えている問題は、ボタンのサイズが同じではなく (ボタンのサイズがテキストのサイズと同じであるように見えるため)、スケール (つまり、大きい、短い、短い) を形成することです。
含まれるテキストに関係なく、ボタンのサイズを同じにするにはどうすればよいですか?

4

4 に答える 4

1

widthCSS で属性を設定する

そのようです：

.buttonStyle {  
    margin-bottom: 10px;      
    border: none;  
    cursor: pointer;  
    font-size: 20px;  
    border-radius: 5px;
    width: 200px;      
}
于 2013-10-18T18:19:48.047 に答える
0

ここにはいくつかのオプションがあります。定数を設定するwidthこともその1つかもしれません。を試すこともできdisplay: blockます。これにより、ボタンが親ノードの幅全体を埋めます。

于 2013-10-18T18:24:57.290 に答える
0

次のようなボタンの標準的な「幅」を定義します。

   .buttonStyle {
        margin-bottom: 10px;
        border: none;
        cursor: pointer;
        font-size: 20px;
        border-radius: 5px;
        width:300px;
    }

私も参照するためにフィドルを作成しました：http://jsfiddle.net/aasthatuteja/vChFX/

お役に立てれば！

于 2013-10-18T18:25:31.283 に答える