目錄

• 設(shè)置QToolButton圖標(biāo)位置
• • 設(shè)置圖標(biāo)處于左側(cè)位置向右移動(dòng)一段距離
  • 設(shè)置圖標(biāo)處于中間位置文字向下移動(dòng)一段距離
  • 小遺憾

設(shè)置QToolButton圖標(biāo)位置

QToolButton通過left，top等方式設(shè)置的圖標(biāo)，緊靠按鈕邊緣，視覺效果并不好。
通過網(wǎng)上查找資料和摸索，得出了可行的一種方式，設(shè)置按鈕的margin和padding；
修改了圖標(biāo)的顯示位置，可以設(shè)置到想要的位置。

我使用的圖標(biāo)尺寸在20*20以內(nèi)。
按鈕上有4個(gè)文字，加上圖標(biāo)，我設(shè)置的按鈕寬度是105px；

設(shè)置圖標(biāo)處于左側(cè)位置向右移動(dòng)一段距離

使用默認(rèn)圖標(biāo)靠左方式設(shè)置圖標(biāo)

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

效果圖：

圖標(biāo)太靠左，看著視覺效果并不是太好。

通過設(shè)置margin-left和padding-left，并設(shè)置圖片為居中對(duì)齊的方式，能達(dá)到下圖效果。

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

我的按鈕寬度105px，設(shè)置margin-left:-75px;即把圖標(biāo)從中間位置向左拉了75px的位置。
再設(shè)置文字位置，padding-left:85px; 即文字從圖標(biāo)的右邊10px位置開始顯示。

大家可以這樣設(shè)定： 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; }

實(shí)現(xiàn)效果：

設(shè)置圖標(biāo)處于中間位置文字向下移動(dòng)一段距離

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

運(yùn)行結(jié)果：

小遺憾

有個(gè)小遺憾就是這樣不能設(shè)置border-radius，因?yàn)閙argin推出去的部分，并不在border的范圍內(nèi)，設(shè)置border-radius也不會(huì)變成圓角。
如果有知道其他方法的伙伴也可以給我評(píng)論，互相交流。

總結(jié)

以上是生活随笔為你收集整理的QToolButton设置图标位置的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。