目录

• 设置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也不会变成圆角。
如果有知道其他方法的伙伴也可以给我评论，互相交流。

总结

以上是生活随笔为你收集整理的QToolButton设置图标位置的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。