我們要實現下面的樣式

在男和女的前面插入一個圖標

思路:創建一個小小的容器，并給容器設置寬高，將圖標放進去

代碼實例:

css部分:

.icon-man{width:50px;height:50px;}.icon-women{width:50px;height:50px;} <tr bgcolor="white"><td>性別</td><td><input type="radio" name="sex" checked="checked"><i class="icon-man"><img src="images/man.jpg"></i>男<input type="radio" name="sex"><i class="icon-women"><img src="images/women.jpg"></i>女</td></tr>

如果你想要調距離的話，就用padding屬性
如下面的測試

將css設置成:

.icon-man{width:50px;height:50px;padding-right:20px;}

其余的不變，看效果:

是不是偏離了很多

總結

以上是生活随笔為你收集整理的怎么样给单选按钮前面插入小图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。