5 
var btnLogin = new Ext.Button({
             text: 'Login',
             scale   : 'large',
             width : 100,
             iconCls: 'checkicon',
             iconAlign: "right",

             handler: function(){
               if(Ext.getCmp('username').getValue() !== '' && Ext.getCmp('password').getValue() !== ''){
                 loginForm.getForm().submit({
                   url: 'authenticate.php',
                   method: 'POST',
                   params: {
                     response: hex_md5(Ext.getCmp('challenge').getValue()+hex_md5(Ext.getCmp('password').getValue()))
                   },
                   success: function(){
                     window.location = 'tabs-adv.html';
                   },
                   failure: function(form, action){
                     Ext.MessageBox.show({
                       title: 'Error',
                       msg: action.result.message,
                       buttons: Ext.Msg.OK,
                       icon: Ext.MessageBox.ERROR
                     });
                   }
                 });
               }else{
                 Ext.MessageBox.show({
                   title: 'Error',
                   msg: 'Please enter user name and password',
                   buttons: Ext.Msg.OK,
                   icon: Ext.MessageBox.ERROR
                 });
               }
             }
           })

ここに画像の説明を入力

質問

チェック アイコンとチェック アイコンのLoginギャップが大きすぎます。チェック アイコンとログイン テキストをくっつける方法、または iconCls を左端に揃える方法。

アップデート

.checkicon {
    margin-right: 25px;
    background-image:url(../images/CheckIcon.png) !important;
}
4

3 に答える 3

1

ボタン アイコンはボタン内に完全に配置されるため、これは少し注意が必要です。.checkicon クラスで次のようなことを試すことができます。

.checkicon {
    right: -25px !important
    background-image:url(../images/CheckIcon.png) !important;
}

これにより、margin-right で探しているのと同じ効果が得られるはずです。

于 2013-02-27T19:44:08.713 に答える
0

スケールを大きく設定せず、幅を削除してみてください。適切な量​​のスペースが自動的に確保されます。

于 2013-02-22T23:43:53.220 に答える
0

選択した値 (たとえば 15px) を使用して、margin-rightプロパティをcheckicon CSS クラスに追加できます。このように、ボタンの幅は同じままで、テキストとアイコンの間のスペースだけが縮小されます。

于 2013-02-23T18:18:42.303 に答える