按钮的图标样式(iconCls)和文本对齐方式 - EXTJS

Question

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

问题

登录按钮和勾选图标之间的间隔太大了，如何让勾选图标和登录文本紧密相连？或者让iconCls稍微向左对齐。

更新

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

- John Walker

---

下面的答案有帮助吗？ - dbrin

Answer 1

这有点棘手，因为按钮图标是绝对定位在按钮内部的。您可以在.checkicon类中尝试类似以下的内容：

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

这应该能够实现你想要通过 margin-right 达到的相同效果。

- bfuoco

Answer 2

尝试不要设置太大的比例并去掉宽度，它应该自动占用正确的空间。

- dbrin

Answer 3

您可以在 checkicon CSS 类中添加 margin-right 属性，并选择一个值，比如 15px。这样，按钮的宽度将保持不变，只有文本和图标之间的空隙会减小。

- amartine

---

.checkicon { margin-right: 25px; background-image:url(../images/CheckIcon.png) !important; }无法工作。在此设置后没有任何反应。 - John Walker

是的，我已经尝试将 !important 添加到 margin-right，但仍然无法生效。 - John Walker