目录 设置QToolButton图标位置设置图标处于左侧位置向右移动一段距离设置图标处于中间位置文字向下移动一段距离小遗憾

设置QToolButton图标位置

QToolButton通过left，top等方式设置的图标，紧靠按钮边缘，视觉效果并不好。 通过网上查找资料和摸索，得出了可行的一种方式，设置按钮的margin和padding； 修改了图标的显示位置，可以设置到想要的位置。

我使用的图标尺寸在20*20以内。 按钮上有4个文字，加上图标，我设置的按钮宽度是105px；

设置图标处于左侧位置向右移动一段距离

使用默认图标靠左方式设置图标

background:url(:/image/image/icon.png) left no-repeat;

效果图： 图标太靠左，看着视觉效果并不是太好。

通过设置margin-left和padding-left，并设置图片为居中对齐的方式，能达到下图效果。

background:url(:/image/image/icon.png) center no-repeat;

我的按钮宽度105px，设置margin-left:-75px;即把图标从中间位置向左拉了75px的位置。 再设置文字位置，padding-left:85px; 即文字从图标的右边10px位置开始显示。

大家可以这样设定： margin-left = -(按钮width-30)px，padding-left: (按钮width-20)px。

#toolButton { margin-left:-75px; padding-left:85px; background:url(:/image/image/icon.png) center no-repeat; font-size: 14px; border: none; }

实现效果：

设置图标处于中间位置文字向下移动一段距离 #toolButton{ min-width:55px; min-height:45px; border:none; padding-top:50px; margin-top:-25px; margin-left:25px; background:url(:/image/image/icon.png) center no-repeat; }

运行结果：

小遗憾

有个小遗憾就是这样不能设置border-radius，因为margin推出去的部分，并不在border的范围内，设置border-radius也不会变成圆角。 如果有知道其他方法的伙伴也可以给我评论，互相交流。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。